1、px和视口

1）

像素分两种物理像素和 css像素我们使用的是css像素
那么我们使用的px是固定的吗？
我们尝试使用默认 font-size: 16px 看看在pc端和移动端的展示情况
pc
移动端

2）两个重要的概念

设备像素 1 DPR = 物理像素／分辨率
在不缩放的情况下，一个css像素就对应一个dpr，也就是说，在不缩放
1 CSS像素 = 物理像素／分辨率

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

3）需要注意的点 px 可以自适应

2、媒体查询 @media

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

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

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

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

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

问题在于 跨度比较大，而且针对不同场景需要配置不同的内容

3、百分比

子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width...盒模型元素

4、rem + px2rem

小问题：在响应式布局中，必须通过js来动态控制根元素font-size的大小 1）
相对于根元素 font-size 布局
默认情况下，html元素的font-size为16px，所以： 1 rem = 16px
为了计算方便，通常可以将html的font-size设置成： html{ font-size: 62.5% }
设置后 1 rem = 10px

2）

下面这个很常用而且很重要的是 常规写 px 到页面转成 rem
px2rem的原理也很简单，重点在于预处理以px为单位的css文件，处理后将所有的px变成rem单位
两种常见方式方法一:

1） webpack loader的形式： npm install px2rem-loader

2）在webpack的配置文件中：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUni: 75,
          remPrecision: 8
        }
      }]
    }]
  }

方法二: webpack中使用postcss plugin：npm install postcss-loader

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

5、vw vh

1）

网页视口宽度
网页视口高度除去网页header footer两个导航栏之后的高度

2）

单位换算将px换算成vw单位，只要确定视图的窗口大小（布局视口），如果我们将布局视口设置成分辨率大小，比如对于iphone6/7 375*667的分辨率，px可以通过如下方式换算成vw： 1px = （1/375）*100 vw

也可以通过postcss的相应插件，预处理css做一个自动的转换，postcss-px-to-viewport可以自动将px转化成vw。 postcss-px-to-viewport的默认参数为：

var defaults = {
  viewportWidth: 320,
  viewportHeight: 568, 
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
};

通过指定视窗的宽度和高度，以及换算精度，就能将px转化成vw。

简单总结了响应式布局区别及使用场景

1、px和视口

2、媒体查询 @media

3、百分比

4、rem + px2rem

5、vw vh