1、布局方式分类
1.1、固定布局 ： 以px（像素）为单位。
缺点：① 页面死板，屏幕大小不一样，展示的效果不一样；
② 不适应响应性布局。
1.2、流式布局 ： 以%（百分比）作为单位。百分比宽度 = 目标元素宽度 / 上下文元素宽度。
优点 ： 可以自适应，根据不同的分辨率显示不同的宽度。
缺点 ：行高、margin-top在大屏上显示的太高，在小屏上显示的太窄。
1.3、弹性布局 ： 以em作为单位。百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸。目前浏览器默认文字大小是16px，使用em将文字像素px转换为相对单位，1rem = 16px，弹性布局也支持响应性web设计。
2、响应式布局概念
响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
2.1、响应式设计的步骤
2.1.1、设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。以上视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。
2.1.2、使用css3媒体查询media来写不同的css样式
① @media (min-width: 320px) and (max-width:639px){} 表示像素在320到629之间的样式设置方式。
② @media screen and (min-width:1000px) {} 表示最小宽度为1000的样式设置方式。
注意：IE6-8下 IE是不支持css3中的媒体查询的，为了解决这个问题，只需要在网上下载 respond.js下来放到我们本地，然后页面上引入即可。respond.js的github地址如下：
https://github.com/scottjehl/Respond/
③ 编写css响应性web设计规范
--- 头部reset.css 是否要独立出来一个css文件，或者不独立出来 直接放在css顶部。
--- 公用的头部或者尾部样式 直接放在css文件顶部，及公用的页面css样式放在顶部(添加注释。)
--- 媒体查询css样式分别如下组织：
a、移动端开发css媒体查询
/* min-width:320px
* 针对独立像素为320px 的css
@media (min-width: 320px) and (max-width:639px){
/* css style*/
}
=======================================================================================================
/* 针对独立像素的宽度是360 384等
* max-width:384来计算 但是边距 字体大小等还是安装360px来计算
@media (min-width:360px) and (max-width: 399px) {
/* css style*/
}
=======================================================================================================
/* 针对独立像素为400px
@media (min-width: 400px){
/* css style*/
}
=======================================================================================================
/* 针对独立像素大于640以上的 小于999的
@media (min-width: 640px) and (max-width:999){
/* css style*/
}
=======================================================================================================
b、在PC端 1000以上的媒体查询写在如下里面：
@media screen and (min-width:1000px) {
/* css style*/
}
备注：
1、设置快高使用%（百分比）。
2、处理图片缩放的方法
a、 简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
b、 用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML结构：
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
>
CSS 控制：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
原文地址：https://www.cnblogs.com/wangyfax/p/9849107.html