响应式布局Viewport

要弄懂响应式布局首先得知道viewport的概念。viewport就是浏览器显示页面内容的屏幕区域。

视口又可分为布局视口，视觉视口，理想视口。

一、viewport

视觉视口：各大网站在初期为了适应手机，给手机端默认视口宽度设为980px。这样原来是电脑上的布局为了能在在手机上显示就会自动压缩。同时网站上的字就会变得十分模糊。来看看典型的栗子

如果在手机上就会变成这样

视觉视口：pc端网页还是保持原来的尺寸大小。移动端能看到的网页的部分就是视觉视口。同样是以百度首页为栗子

在移动端能看到的部分，也就是上面的图，就是视觉视口。

再来看看理想视口，它是pc端的网页在手机端的最佳布局方式。各大主流网站都做了移动端的适配，所以同样以百度为例。

上面展示的就是理想视口。

为了能让网页在移动端都以理想视口的方式布局。我们需要用到meta标签，它会通知浏览器以设备的宽度来呈现网页。如果加上了meta标签，布局视口的宽度就以设备宽度为准，而不是固定以980px。设备宽度为1000px，布局视口宽度就是1000px，设备是200px，布局宽度就是200px。

二、meta标签

来正式的看一看神奇的meta标签。

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

再看看百度的实际应用

三、px单位

物理像素和物理像素比：

物理像素和设备的分辨率有关。我们知道分辨率越高，屏幕上的显示就会更清晰。物理像素是设备一出厂就规定好了的。如果用ps打开一张图片，经过无限放大之后看到的那一个个的小格子，就是1像素.

px单位是css中的单位，它指的是css像素，1css像素=物理像素/分辨率。

如果设计师给了你一份750px*1080px的视觉稿，布局视口之前已经提过是980px。此时在pc端中 1css像素=750/980=0.76px，移动端（以iPhone6为例）1css像素=750/375=2px。这里看出，在pc端中1像素==0.76个物理像素，在iPhone6中1css像素==2物理像素。这样就会造成单位的不统一，从而造成视觉效果的不统一。

常见移动式布局解决方案

媒体查询：

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

使用百分比布局（流式布局）

百分比布局，很好理解。但是问题是百分比是相对于谁的百分比。

参考文档：https://github.com/forthealllight/blog/is80sues/13 这里有很详细的介绍

使用rem单位

rem单位在某种程度上保持了单位的一致性。无论嵌套的有多深，它始终以html根元素的字体大小为标准1rem=16px