响应式布局和自适应布局

响应式与自适应的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

响应式布局设置

1、@media 可以针对不同的屏幕尺寸设置不同的样式。这是响应式布局的核心。如：

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

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

2、设置meta标签

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

        device-width在一个设备中是不会变的，他的值跟设备宽度有关，width在不同的布局方案或者不同的容器中展示都有可能不一样，device-width就相当于js的window.screen.width，width相当于js的document.body.clientWidth了。
        initial-scale               初始的缩放比例
        minimum-scale        允许用户缩放到的最小比例
        maximum-scale       允许用户缩放到的最大比例
        user-scalable =0     不允许用户手动缩放

3、px与自适应

设置布局视口为理想视口时，1个css像素可以表示成：

        1 CSS像素 = 物理像素／分辨率

在pc端的布局视口通常情况下为980px，移动端以iphone6为例，分辨率为375 * 667，也就是说布局视口在理想的情况下为375px。比如现在我们有一个750px * 1134px的视觉稿，那么在pc端，一个css像素可以如下计算：

        PC端： 1 CSS像素 = 物理像素／分辨率 = 750 ／ 980 =0.76 px

        iphone6：1 CSS像素 = 物理像素 ／分辨率 = 750 ／ 375 = 2 px

在PC端，一个CSS像素可以用0.76个物理像素来表示，而iphone6中 一个CSS像素表示了2个物理像素。此外不同的移动设备分辨率不同，也就是1个CSS像素可以表示的物理像素是不同的，因此如果在css中仅仅通过px作为长度和宽度的单位，造成的结果就是无法通过一套样式，实现各端的自适应。
 

DPR(设备像素比）： 1 DPR = 物理像素／分辨率

3、百分比布局

        当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

        （1）子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。

        （2）top和bottom 、left和right

子元素的top和bottom设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样

子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

        （3）padding和margin

子元素的padding和margin如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

        （4）border-radius

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

4、rem布局

rem是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

5、视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，1vw都等于视图宽度的百分之一，除了vw和vh外，还有vmin和vmax两个相关的单位。