一、序言
积极响应式Web结构设计能让两个中文网站同时网络连接多种不同电子设备和数个萤幕，能让中文网站的产业布局和机能随使用者的使用环境（萤幕大小不一、输出方式、电子设备/应用程序能力）而变化。责任编辑主要如是说一些积极响应式产业布局难忽视但又很重要的习题。
二、视口
终端后端中多说的 viewport （视口）是应用程序中用于呈现出网页的地区。视口一般来说并不等同于萤幕大小不一，特别是能翻转应用程序询问处的情况下。智能手机端与PCPudukkottai口存在差别，笔记本电脑端视口长度等同于解析度，而终端端视口长度跟解析度没关系,长度缺省是电子设备供货商选定的。iOS, Android基本都将那个视口解析度增标为 980px。
1.为什么智能手机Pudukkottai口要标为980px?
前年贾伯斯构想：苹果公司智能手机如果在市场上火热了，但是各中文网站还没顾得上制做智能手机端网页，那么使用者不得已用智能手机出访笔记本电脑版的网页，如何用小萤幕出访大萤幕的网页也反之亦然复本呢？Junagadh就想著为智能手机一般来说两个视口长度，让智能手机的视口长度等同于世界上大多数PC网页的版心长度，是980px。这样，用智能手机出访笔记本电脑版网页的时候，旁正好没博纳县。不过网页翻转后文本会显得十分小，使用者需要全自动弱化增大才能看清，新体验十分差。
2.束缚视口
为了解决后面的问题，能在网页的中加进上面这行标识符：
width=device-width 视口为电子设备长度（是人增设的两个长度）//不增设的话预设为980px initial-scale=1.0 调用的视口大小不一是1.0倍 maximum-scale=1.0 最大的次方是1.0倍 user-scalable=0 不容许翻转视口
那个视口的条码告诉应用程序怎么图形网页。在这里，条码想抒发的原意是：按照电子设备的长度（device-width）来图形FTP。实际上，在支持那个条码的电子设备上给你看看效用，你就明白了。
不错呀！使用者新体验大大改善！！！
此时如果用document.documentElement.clientWidth来测试应用程序萤幕长度，你会发现当前视口长度等同于智能手机萤幕的长度，约数后的视口长度都是在320~480之间（智能手机竖直使用的时候）。
那个视口的尺寸，是智能手机厂商增设的，能够保证我们的文本比如16px，在自己的那个视口下清晰、大小不一刚刚合适。所以大萤幕的智能手机的束缚视口 > 小萤幕智能手机的束缚视口。这就能够保证我们的网页能用px写字号、写行高。
需要注意的是：束缚之后的视口长度，不是自己的解析度！！每个智能手机的解析度，都要比自己的视口长度大得多得多！
最最重要的一句话：后端开发工程师，丝毫不关心智能手机的解析度，我们只关心视口。
三、图片
人们常说说“一图胜千言”，确实如此。我们网页中关于松饼的文本如是说再多，也没图片有吸引力。上面我们就在网页上方加进一张松饼的图片（2000像素宽），效用类似引诱使用者往下看的大题图。
哇，真是好大一张图，它让整个网页看起来都失衡了，水平方向上图片溢出了。不行，必须解决那个问题。能用CSS给图片选定一般来说长度，但问题是我们想让它能在不同大小不一的萤幕中自动翻转。比如，我们例子中的iPhone萤幕长度为320像素，如果我们把图片增设成320像素宽，那么iPhone萤幕旋转后又怎么办呢？这时候320像素变成了480像素。
解决方案很简单，只要一行CSS标识符就能让图片随容器长度自动翻转:
img {
max-width: 100%;
}回到智能手机上，刷新网页，结果比较符合预期了。
这里声明max-width规则，是要保证所有图片最大显示为其自身的100%（即最大只能显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有长度小，图片会翻转占满最大可用空间。
为什么不用width:100%?
要实现图片的自动翻转，也能使用更通用的 width 属性，比如width:100%。然而，这条规则在这里并不适用。因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。
四、智能手机应用程序内核
在终端端，仅有四个独立的应用程序内核，分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。
目前微软的Trident在终端终端上主要为WP7、8系统内置应用程序。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋应用程序以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛，Android原生应用程序、苹果公司的Safari、谷歌Chrome(Android4.0使用)都是基于Webkit开源内核开发的。兼容的前缀：
1 -ms- 2 -moz- 3 -o- 4 -webkit-
中国使用者的应用程序市场份额：
UC、Android内置、Chrome、Safari、QQ Browser都是webkit内核，从图上看占了绝大部分的市场份额。
所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，别的兼容比如-ms-都不写。
五、流式产业布局
百分比产业布局也叫作流式产业布局、弹性盒产业布局。智能手机网页没版心，都左右撑满。
百分比能够增设的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比增设的。
- 如果用百分比写width，那么指的是父元素width的百分之多少。
- 如果用百分比写height，那么指的是父元素height的百分之多少。
- 如果用百分比写padding，那么指的是父元素width的百分之多少，无论是水平的padding还是竖直的padding。
- 如果用百分比写margin，那么指的是父元素width的百分之多少，无论是水平的margin还是竖直的margin。
- 不能用百分比写border的长度
接下来我们看两个例子：
div{
width:200px;
height:300px;
padding:10px;
}
div p{
width:50%;
height:50%;
padding:10%;
}
此时p的真实长度是多少？此时p的真实长度是140px*190px
六、媒体查询
1.为什么积极响应式 Web 结构设计需要媒体查询
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表示看那个网页的电子设备是显示器，而不是残疾人听力电子设备、也不是打印机。后面用and符号罗列所有的可能性。
值得注意：媒体查询只能包裹选择器，不能包裹k:v对儿。
IE6、7、8不支持媒体查询，也为了防止智能手机端某些应用程序不支持媒体查询，所以不要把所有的选择器都放在媒体查询里面。
七、rem积极响应式产业布局
rem积极响应式产业布局思想
- 一般不要给元素增设具体的长度,但是对于一些小图标能设定具体长度值
- 高度值能增设一般来说值,结构设计稿有多大,我们就严格写多大
- 所有增设的一般来说值都用REM做单位(首先在HTML中增设两个基准值：PX和REM的对应比例,然后在效用图上获取PX值,产业布局的时候转化为REM值)
- JS获取真实萤幕的长度,让其除以结构设计稿的长度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就能在终端端自适应了
什么是rem,它与em有何区别
rem:当前网页中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
em:表示父元素的字号的次方。(特例：在text-indent属性中，表示文本长度)
em为单位的时候，font-size属性是计算后继承，box1计算出来是40px。那么里面的box2、box3继承的都是40px。em单位不仅仅能用来增设字号，还能增设任何盒模型的属性，比如width、height、padding、margin、border
rem有一点优势是能和媒体查询配合，实现积极响应式产业布局：
@media screen and (min-width: 320px) {
html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
html {font-size: 18px;}
}运用场景
如果我们做的H5网页只在终端端出访，这是因为REM不兼容低版本的应用程序。而如果终端端和PC端公用一套标识符，建议使用流式产业布局。
如何做个REM积极响应式产业布局
1、从UI结构设计师拿到PSD结构设计稿,然后在样式中给HTML设定两个font-size的值，我们一般都增设两个方便后面计算的值，例如：100px
html{
font-size:100px；//1rem=100px
}2、写网页，写样式首先按照结构设计稿的尺寸来写样式，然后在写样式值的时候，需要把得到的像素值除以100计算出对应的REM的值。
值得注意的是：真实项目中外层盒子的长度我们一般还是不写一般来说值，沿用流式产业布局法的思想，我们用百分比的方式产业布局
margin:0 0.2rem height: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部分
原文出处：浪里行舟
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。