五、响应式布局

1、什么是响应式布局 Responsive Design

我们开发的页面在不同设备上都能良好展示，常用的设备：pc、平板、手机、ipod ...

2、meta便签中的viewport：

在PC端，一个页面的宽度(HTML的宽度)与浏览器的可视窗口宽度是一致的，且PC端的浏览器我们可以调节大小，手机端的浏览器和手机的宽度是保持一致的，且一般情况下不能调节大小。移动端HTML页面的宽度和浏览器(或者手机)的宽度没有必然的联系，一般HTML的宽度都是980/1024宽度
我们平时用手机浏览器访问一个pc端HTML页面,发现内容都缩小了：就是因为手机只有320宽度，但是页面的宽度确有980，这样如果把一个页面都要看全的话，只能缩小大概三倍左右

=>解决方案
HTML的宽度应该和手机保持一致，这样的话就不会缩小了，这样的话我们需要给HTML页面设置一个META标签：

• viewport：视口,设置当前浏览器按照多大的宽度来渲染页面(或者说让HTML页面有多宽)
• width=device-width 设置一个HTML页面的总宽度和设备的宽度(手机的宽度)保持一致
• user-scalable=no 禁止用户手动缩放
• initial-scale=1.0 / maximum-scale=1.0 / minimum-scale=1.0：设置页面的初始(最大、最小)缩放比例都是1:1的(既不放大也不缩小)

以后只要是做移动端的产品(只要页面需要在手机上访问)，这个meta 必须要加

layout viewport：布局视口(我们设定的就是它)
visual viewport
ideal viewport
详情见：http://www.cnblogs.com/2050/p/3877280.html

---

3、媒体查询@media

我们按照上述的原理，增加了viewport，页面内容不缩小了，但是出现了横向的滚动条，why?
=>原因
HTML的宽度：320（页面宽度320）
但是它里面文章article(内容)却有800的宽度，属于内容超出，所以出现了横向的滚动条
=>解决
article的宽度和html的宽度保持一致，不让内容超出页面，但是这样的设置需要在HTML的宽度小于800PX的时候在设置，大于800的时候(PC)，我们写固定的样式值也没有问题(内容不会超出)，这时就需要查询设备宽度（） =>"媒体查询@media"

媒体设备：

all ->所有设备
screen ->所有屏幕设备(PC、PAD、PHONE...)
print ->打印机设备
...

媒体条件：

width:800px HTML的宽度为800PX
max-width：800px HTML的宽度小于等于800PX
min-width：320px HTML的宽度大于等于320PX
device-width：设备宽度
max-device-width
min-device-width
orientation:landscape(横屏) | portrait(竖屏)
-webkit-device-pixel-ratio：屏幕像素密度比

@media all and (max-width:800px) and (min-width:640px){
   符合该媒体查询条件的设备执行这里面的样式
   .article{}
}

@media screen and (orientation:landscape){

}

@media screen and (-webkit-device-pixel-ratio:2){

}

总结：
1、增加viewport
2、使用媒体查询，在指定的条件下调整样式
对于外层容器来说，不能设置具体的宽度了，需要使用百分比
其余的样式都是写具体的值，如果在某一个尺寸感觉不太方便阅读，我们在使用媒体查询细微调整即可
=>这种响应式布局方案就是“流式布局法(媒体查询法)” 核心：宽度不固定(百分比)，其余都固定，不好在调整

---

4、项目中的移动端产品形态

->PC端和移动端用的是同一套产品:

1)流式布局
2)先按照PC端写，宽度可以写死，也可以写成百分比
3)在手机端使用@media在一点点的调整

->PC端和移动端用的是不同的产品,PC端一套,移动端是单独的一套:

1)PC端做的时候不需要考虑响应式(所有的尺寸按照设计稿写死即可)
2)移动端的项目需要做响应式适应不同的手机，但是不需要考虑PC了(有些公司会针对pad在出一套)，可用rem布局或或流式布局
->流式布局：
->REM

---

5、移动端设计稿一般都是多大的？

640960 ->iphone4 (320480)
6401136 ->iphone5 (320568)
7501334 ->iphone6 (375667)

给我们的设计稿都是比真实的手机尺寸扩大二倍来做的(高度可以忽略不管，但是宽度必须是640或者750)

DPR适配：屏幕像素密度比
目前大部分手机的屏幕像素密度比都是2倍/3倍的在二倍或者更高倍数的屏幕像素密度比例下，我们肉眼看到的更加清晰
iphone3 ：320480 分辨率 320480
iphone4 ：320480 分辨率 640960

---

6、三种响应式布局

设计师给我们一个设计稿：640*960

• ->流式布局法：
  1)宽度百分比自适应的
  2)其余的尺寸都按照设计稿中的尺寸的一半来写，假设：设计稿中 高度是100px，字体大小是36PX，边框是2PX 我们写的时候写：.box{ height:50px; font-size:18px; border:1px solid red; ... }

  问题：
  设计师设计的尺寸不应该出现奇数
  “一像素边框问题”：设计师设计的边框大小是1PX，我们布局的时候写.5PX，浏览器不支持半像素的，如何处理？ => transform:scale(0.5)

• ->等比缩放布局(已经被PASS了)
  我们布局的时候严格按照设计稿的尺寸来写，例如：设计稿中是 300*100 F:36 M:20我们写的时候

.box{
   width:300px;
   height:100px;
   font-size:36px;
   margin:20px;
   ...
}
JS:
var winW=document.documentElement.clientWidth;
var n=winW/640; //->0.5 或者其他的比例
document.body.style.transform='scale('+n+')';

• ->REM(等比缩放思想的升级和目前最流行的响应式布局方式)

PX：固定单位，我们写多大的值，以后不管当前页面有多宽多高，它依然是这样的值；如果想要它改变的化，我们需要手动一个个的去调整

REM：相对单位，相对于当前页面根元素(HTML)字体大小设定的，例如：

  html{
     font-size:12px; //->1REM = 12PX  一个页面默认根元素字体大小16PX(谷歌)
  }

  .box{
     width:10rem; //->120PX
  }

以后只要我们改变HTML的font-size，所有以REM为单位的值都会跟着改

---

7、真实项目中如何使用REM做响应式布局开发：

设计稿：640*960
1、不管以后在什么样的手机上运行，我们只需要严格按照设计稿中标注的尺寸来开发即可
->设置HTML的font-size:100px =>1REM=100PX =>640的设计稿中是这样换算比例
->设计稿中的尺寸是多大，我们布局的时候就写多大，但是需要把所有量出来的PX都除以100变换成REM为单位的值

2、在JS中获取当前手机宽度，例如获取的是320PX
640 1rem->100PX
320 1rem->(320/640*100) px
根据屏幕和设计稿的比例，动态计算出最新的REM和PX的换算比例即可，重新设置HTML的font-size，这样就让所有以REM为单位的值都跟着改变了