响应式布局常见的方案-移动+PC

导读：

前端开发，必然会遇到多端适应，在不一样分辨率的设备上，拥有一样的效果。常见的方法有媒体查询、百分比、rem、vw/vh，开发人员在经常使用的px单位状况下，怎么运用上面的方法呢，请见正文。

1、相关概念

一、px与视口

px, 是开发人员经常使用来进行开发的单位，宽、高、间隙等，可是你们想一下，应该清楚： px是跟经常使用的单位，好比厘米/米等固定单位是有区别的。

咱们在pc端，设置文字16px，在移动端，可能就变得很小很小了。

为了理清楚这个概念咱们首先介绍像素和视口的概念

1.1 像素概念

像素是网页布局的基础，一像素表示设备能显示的最小的单位，像素又分为物理像素和CSS像素

• CSS像素是为开发者提供的一种抽象的单位
• 只跟设备自身有关，而且每一个设备自身的像素是固定的

物理像素和CSS像素又是怎么转换的呢，先看一下视口的概念

1.1 视口概念

视口分广义和狭义，广义是浏览器显示内容的屏幕区域，狭义分下面几种：布局、视觉、理想

1.1.1 布局视口（layout viewport）

在pc网页的状况下，默认定义大小为980px，若是在没有设置viewport状况下，pc页面在移动端展现的话，会以默认大小为基准，若是以默认大小进行显示的话，在移动端会很模糊

1.1.2 视觉视口（visual viewport）

表示浏览器看到的网站的区域，用户能够经过放大缩小来进行查看网页里面的内容，从而改变视觉视口的大小，至关于拿一个放大镜进行观察。所以，视觉这并不影响布局视口的实际高度和宽度

1.1.3 理想视口（ideal viewport）

能够总结为一句话，理想视口就是在给定的物理像素状况下，最佳的布局视口。换句话说，就是要获取移动端的最佳布局视口。

为了在移动端获取最佳布局视口，经常使用viewport标签来进行控制

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

主要属性为 content里面的width,要适应移动端布局，须要设置其为device-width,通常表示分辨率宽，这样设置就把移动端的布局设置成理想视口了。

1.2 DPR 设备像素比

1 DPR = 物理像素／分辨率
复制代码

若是在不缩放状况下，1css 对应 1dpr

1 CSS像素 = 物理像素／分辨率
复制代码

1.3 PX、自适应

经过上面的viewport元标签，咱们已经把布局设置成理想视口时，1CSS像素能够表示为

1CSS = 物理像素/分辨率
复制代码

在pc布局视口下，通常为980px,移动端以iphone6为例，分辨率375 * 667 ，如今有一个750px * 1134px视觉稿，在pc端：

1CSS = 750 / 980 = 0.76px
复制代码

在移动端：

1CSS = 750 / 375 = 2 px
复制代码

很明显移动端和PC端每CSS像素对应的物理像素，若是只用一套px的CSS的做为单位，这样是没法作到各端展现同样的样式。要想获得同样的效果，有下面几种办法。

2、媒体查询

若是一套样式不行，那么可否给每一种设备各一套不一样的样式来实现自适应的效果？

答案是确定的

使用@media媒体查询能够针对不一样的媒体类型定义不一样的样式，特别是响应式页面，能够针对不一样屏幕的大小，编写多套样式，从而达到自适应的效果。举例来讲：

@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;
    }
}
复制代码

媒体查询的缺点也很明显，若是在浏览器大小改变时，须要改变的样式太多，那么多套样式代码会很繁琐。

3、百分比

除了用px结合媒体查询实现响应式布局外，咱们也能够经过百分比单位 " % " 来实现响应式的效果。

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

css中的子元素中的百分比（%）究竟是谁的百分比？

1 百分比的具体分析

1.1 height和width的百分比

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

1.2 top和bottom 、left和right

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

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

1.3 padding/margin

子元素的padding若是设置百分比，不管是垂直方向或者是水平方向，==都相对于直接父亲元素的width==，而与父元素的height==无关==。 margin跟padding同样

2百分比缺点

• 计算困难，若是咱们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
• 从小节1能够看出，各个属性中若是使用百分比，相对父元素的属性并非惟一的。好比width和height相对于父元素的width和height，而margin、padding无论垂直仍是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，形成咱们使用百分比单位容易使布局问题变得复杂

4、rem

1 rem 单位换算

rem单位不管嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认状况下，html元素的font-size为16px，因此：

1 rem = 16px
复制代码

能够经过改变html font-size 来进行动态自适应

2 rem2px, px2rem

有个问题就是开发的时候，单位用rem，而设计师通常都是用px来设计，开发者用rem来开发，极为不适应，虽然能够 font-size进行转换。

有个方案，是开发也用px，用webpack loader进行转译

2.1 直接用loader

npm install px2rem-loader
复制代码

配置文件

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

2.1 用webpack的插件

npm install postcss-loader
复制代码

在webpack的plugin中:

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

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

3 rem 缺点

在响应式布局中，必须经过js来动态控制根元素font-size的大小。

5、经过vw/vh来实现自适应

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

单位	含义
vw	相对于视窗的宽度，视窗宽度是100vw
vh	相对于视窗的高度，视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

相关的转换，好比 375 分辨率的设备

1px = （1/375）*100 vw
复制代码

也能够经过postcss的相应插件，预处理css作一个自动的转换,能够自动将px转化成vw。

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

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

vw/vh 方案因浏览器兼容有问题，暂时只做了解，可不深刻学习.