作者：icepy 在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。设置在本文中，我将继续使用我在第一篇 CSS Grid 布局
转载
2023-07-26 11:08:22
268阅读
响应式布局概念响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局布局特点响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+自适应布局。分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个
转载
2023-07-24 02:56:28
216阅读
对于小业务，需要自适应的相应式布局，如果引用bootstrap一样的框架，将会非常笨重，于是手写一个css/*自写栅格 start*/body { font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Heiti SC","Microsoft YaHei",sans-serif; margin:0;}
原创
2022-03-27 18:47:11
167阅读
对于小业务，需要自适应的相应式布局，如果引用bootstrap一样的框架，将会非常笨重，于是手写一个css/*自写栅格 start*/body { font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Heiti SC","Microsoft YaHei",sans-serif; margin:0;}
原创
2021-06-17 12:31:44
385阅读
从概念上看两者的区别：响应式布局就是响应式设计方案呈现的效果，具体指页面的布局会根据不同设备的显示面积（主要是宽度）的不同而呈现不同的布局，这个效果比弹性的布局更好的地方是样式会主动地根据用户的设备的显示面积呈现出布局更灵活，可读性更强，当然对研发的要求也会更高（比如说如何更好地让图片、适配、UI动态效果自适应各种布局）。响应式设计一般来说是一套设计方案解决所有的设备的自适应问题。移动端布局就是传
转载
2023-10-05 07:35:05
382阅读
响应性web设计的理念是：页面的设计与开发应当根据用户行为与设备环境(包括系统平台，屏幕尺寸，屏幕定向等)进行相应的响应及调整。具体的实践方式由多方面组成，包括弹性网格和布局，图片，css Media(媒体查询)使用等。一：布局方式有如下几种：1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但
转载
2023-08-03 21:21:02
520阅读
HTML布局：<div id="one"> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div
原创
2022-02-23 13:51:46
226阅读
HTML布局：<div id="one"> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div class="aa"></div> <div
原创
2020-11-27 18:29:49
170阅读
一、什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网
原创
2022-05-17 19:20:23
407阅读
一、实现弹性布局的方法：1.浮动+百分比好处...
转载
2019-07-25 13:26:00
243阅读
2评论
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
原创
2022-06-16 17:47:29
176阅读
一、实现弹性布局的方法：1.浮动+百分比好处：网页内容宽度自适应多设备都适用 2.flex弹性盒模型：该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用空间。二、Flex布局的功能：1.在屏幕和浏览器窗口大小发生改变时，可以灵活的调整布局。2.控制元素在页面的布局方向。3.按照不同于DOM所指定的排序方式对屏幕上的元素进行重新排序。三、Flex布局的优势：1.可以让盒子里...
原创
2019-07-25 13:25:52
416阅读
概念1 响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。2 响应式Web设计的优点：...
原创
2021-11-19 13:40:54
219阅读
什么是响应式布局？在不同屏幕分辨率下，能够以最佳的方式进行展示，元素的宽度尺寸以及展示方式可能会改变。通常使用 @media 多媒体查询来实现响应式布局。优点页面能够兼容不同分辨率的屏幕。缺点工作量大，UI 需要设计多个平台的版本。场景一套代码兼容 web 端、平板、
原创
2023-03-07 22:05:33
523阅读
一、什么是响应式布局?响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看
原创
2024-03-07 17:08:15
74阅读
前言：此处响应式指的是数据响应式变化，而不是页面的响应式布局，页面的响应式布局在我的其他文章中有提到。一、什么是vue响应式Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。二、vue2的响应式原理2.1 官方解释当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将
转载
2024-02-24 18:21:48
324阅读
背景最近开发了3个门户网站，一般程序员都会有显示器，一开始我使用的是flex响应式 + 宽度百分比去进行适配，但是开发完之后发现在显示器上看着正常，但是到了笔记本上就发现宽度是自适应了，但是高度并没有随着宽度去等比例缩小，就显得页面很别扭，所以我就查了很多文章，一个一个去试，下面来总结一下，方便以后去开发：方案
lib-flexible + px2remLoader + postcss-px2re
转载
2024-04-13 23:36:35
125阅读
