前言
响应式网页设计允许网站同时适应多个设备和多个屏幕，允许网站的布局和功能随着用户的使用环境（屏幕大小、输入法、设备/浏览器功能）而变化。本文主要介绍一些在响应式布局中容易被忽视的重要知识点。
层
联通后端经常提到的viewport（层）就是浏览器中用来渲染网页的区域。图层通常不等于屏幕大小，尤其是当浏览器窗口可以缩放时。手机和PC上的层是有区别的。笔记本端的层长等于码率，而联通端的层长与码率无关。长度的默认值由设备制造商指定。iOS 和 Android 基本上都将这一层的比特率设置为 980px。
为什么移动层设置为980px？
乔布斯的想法：如果苹果手机在市场上很火，而各个网站还没有来得及做手机页面，那么用户就得用手机访问笔记本版的页面，如何利用小屏访问大屏页面也可读？? 乔帮主想过给手机固定一个像素长度，让手机的层长等于世界上大部分PC网页的中心间距，也就是980px。这样，在用手机访问笔记本版网页时，门口就没有空白了。但是页面放大后，文字会显得很小，需要用户自动放大缩小才能看清楚，体验特别差。
约束层
为了解决上述问题，可以在网页中加入如下代码行：
width=device-width层是设备的长度（也就是人设置的一个长度）//如果不设置，默认是980px
initial-scale=1.0 初始化层大小为1.0 倍
maximum-scale=1.0 最大倍数为1.0倍
user-scalable=0 不允许缩放层
该层的标签告诉浏览器如何渲染网页。在这里，标签要表达的意思是：根据设备的长度（device-width）来渲染网页内容。事实上，在支持此标签的设备上向您展示功效，您就会看到。
不错！用户体验大大提升！！！
这时候如果用document.documentElement.clientWidth来测试浏览器屏幕的长度，会发现当前图层的长度等于手机屏幕的长度，质数在 320 到 480 之间（手机垂直使用）。时间）。
这个层的规范是手机厂商设定的，保证我们的文字，比如16px，在这个层下清晰，大小刚刚好。所以大屏手机的约束层>小屏手机的约束层。这样能不能保证我们的网页可以用px来写字号和列宽。
需要注意的是：下一层的长度是受约束的，而不是它自己的码率！！每部手机的码率都远大于自己的层长！
最重要的一句话：后端开发工程师根本不关心手机的码率，我们只关心层。
图片
人们常说“一张图抵千言”，这是真的。我们网页上关于 Cookie 的文字再多也没有图片那么吸引人。接下来，我们将在页面顶部添加一张年糕图片（宽 2000 像素），效果类似于迫使用户向下看的大图。
哇，好大的图，让整个页面看起来不平衡，图片横向溢出。不行，这个必须解决。可以使用 CSS 为图像指定固定长度，但问题是我们希望它在不同的屏幕尺寸上手动缩放。例如，在我们的反例中，iPhone 屏幕的长度是 320 像素。如果我们将图片设置为 320 像素宽，当 iPhone 屏幕旋转时会发生什么？这时，320 像素变成了 480 像素。
解决方法很简单，只需要一行CSS代码就可以让图片随容器长度手动缩放：
图像{
最大宽度：100%；
}
回到手机上，刷新页面，结果比较符合预期。
这里声明了max-width规则，就是为了保证所有图片最多100%自己显示（也就是只能显示和自己一样大）。这时候，如果包含图片的元素（比如包含图片的body或者div）小于图片的固有长度，图片会被缩放以填满最大可用空间。
为什么不使用宽度：100%？
要实现图像的手动缩放，还可以使用更通用的宽度属性，例如width:100%。但是，此规则不适用于此处。由于这条规则，它将显示为与其容器一样宽。在容器比图像宽得多的情况下，图像将被不必要地拉伸。
移动浏览器内核
在联通方面，只有四个独立的浏览器内核，分别是谷歌的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。
目前谷歌的三叉戟主要是联通终端上WP7、8系统的外接浏览器。Opera的Presto核心主要是OperaMobile、OperaMini、Opera浏览器和Maxthon HDBeta。Webkit 内核的应用范围更广。Android 原生浏览器、Apple 的 Safari 和 Google Chrome（Android4.0 使用）都是基于 Webkit 开源内核开发的。
兼容前缀：
1毫秒-
2-moz-
3-o-
4-webkit-
中国用户浏览器市场份额：
过去一年中国用户浏览器市场份额
UC、Android external、Chrome、Safari、QQBrowser都是webkit核心，从图中占据了大部分的市场份额。
所以一定要服务-webkit-。有些公司只兼容-webkit-，有些公司不兼容-ms-。
流程布局
比例布局也称为流式布局、弹性盒布局。移动网页没有页面的心脏，都是左右满的。
比率可以设置的属性是宽度、高度、填充和边距。其他属性，如边框、字体大小，不能用比率设置。
我们来看一个反例：
div{
width:200px;
height:300px;
padding:10px;
}
div p{
width:50%;
height:50%;
padding:10%;
}
/*此时p的真实宽度是多少？*/
此时p的真实长度为140px*190px
媒体查询
1.为什么响应式网页设计需要媒体查询
CSS3 媒体查询允许我们将特定的 CSS 样式应用于特定设备功能或条件的网页。没有媒体查询，单独的 CSS 不会改变页面的外观。这个模块允许我们预编程 CSS 规则以适应许多不可预知的触发器，例如水平或垂直屏幕方向、更大或更小的视口等等。灵活的布局其实可以让设计适应很多场景，包括个别规格的屏幕，但是有时候还不够，因为我们需要对布局做更细致的调整。这可以通过媒体查询实现，它相当于 CSS 中的基本条件逻辑。
2.媒体查询句型
我们在媒体查询之外编写的第一条规则是“基本”样式，它适用于任何设备。在此基础上，我们针对不同层次、不同能力的设备，逐步减少不同的视觉效果和功能。
body {
background-color: grey;
}
@media screen and (min-width:1200px){
body{
background-color: pink;
}
}
@media screen and (min-width:700px) and (max-width:1200px){
body{
background-color: blue;
}
}
@media screen and (max-width:700px){
body{
background-color: orange;
}
}
其中，@media 表示媒体查询，查询现在哪些设备正在查看这个网页，查看了多长时间。screen 表示浏览本网页的设备是显示器，不是助听器，也不是复印机。上面列出了所有可能性，并带有和符号。
注意：媒体查询只能包装选择器手机界面布局设计方式，不能包装 k:v 对。
IE6、7、8 不支持媒体查询手机界面布局设计方式，为了避免手机上个别浏览器不支持媒体查询，不要将所有选择器放在媒体查询上。
rem 响应式布局
rem 响应式布局思路
通常不给一个元素设置一个具体的长度，对于一些小图标，可以设置一个具体的长度值和一个固定的高度值。我们会严格写设计稿有多大。所有固定值均以REM为单位设置（先在A中设置基准值在HTML中：PX和REM的对应比例，然后在疗效图上得到PX值，转换为REM值layout) JS获取真屏长度，乘以设计稿长度，计算Ratio，根据该比例重置之前的基准值，这样项目就可以在联通上自适应了
哪些是 rem，它与 em 有什么不同
rem：当前页面元素的REM单元的样式值，动态估计为HTML元素的font-size的值
em：表示父元素字体大小的倍数。（特殊情况：在 text-indent 属性中，表示文字间距）
正文→字体大小：20px；
→字体大小:2em;box1
→字体大小:2em;box2
→字体大小:2em;box3
当em为单位时，估计后继承font-size属性，box1估计为40px。所以上面的box2、box3继承了40px。em 单位不仅可以用来设置字体大小，还可以设置任意盒子模型的属性，比如宽度、高度、内边距、边距、边框
rem 的一个优点是它可以配合媒体查询来实现响应式布局：
@mediascreenand(min-width:320px){html{font-size:14px;}}@mediascreenand(min-width:360px){html{font-size:16px;}}@mediascreenand(min-width:400px){ html{字体大小：18px;}}
使用场景
如果我们做的H5页面只能在联通上访问，这是因为REM不兼容低版本浏览器。而如果联通和PC共用一套代码，建议使用流式布局。
如何制作 REM 响应式布局
1、从 UI 设计师处获取 PSD 设计稿，然后为样式中的 HTML 设置一个 font-size 值。我们通常会在前面设置一个便于估算的值，例如：100px
html{
字体大小：100px；//1rem=100px
}
2、写页面，写风格
首先按照设计稿的规范写样式，然后在写样式值的时候，需要将得到的像素值减去100，估计出对应的REM值。
值得注意的是：在实际项目中，我们通常不会为内袋的长度写一个固定值。遵循流式布局方式的思路，我们采用比例布局。
边距：00.2rem
高度：3rem；
3、根据当前屏幕的长度和设计稿的长度来估计我们HTML的font-size值
例如：设计稿长度为640px，其中一个部分是轮播图。它的规格是600*300。在样式中，给HTML设置一个font-size值为100px，那么轮播图的大小应该是6rem×3rem，那么如果手机屏幕长度是375px，那么font-size应该设置为多少。
375/640*100->fontsize=58.59375//此时轮播图可以适应手机屏幕大小
根据当前屏幕长度与设计稿长度的比例，动态估算当前长度下的fontsize值。如果更改了fontsize值，那么之前设置的所有REM单位的值都会被手动放大或缩小。这可以通过以下代码实现：
但是如果当前屏幕长度小于设计稿长度，图片会被拉伸扭曲，所以需要对上面的代码稍作改动：
//html部分
//js部分
function（）{
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW；
var oMain=document.getElementById（“main“）;
if(winW>desW){
oMain.style.width=desW+"px";
oMain.style.margin="0 auto";
return;
}
document.documentElement.style.fontSize=ratio*100+'px';
}();
参考
响应式网页设计：Ben Frain 的 HTML5 和 CSS3 实践
