Pix单元在移动响应式布局中的缺点及方案比较（媒体查询、百分比、rem和vw/vh）

让我们看一下宽度属性。在移动端设置时，我们将元描述字段中的宽度设置称为device-width，device-width通常表示分辨率的宽度。通过设置宽度=设备宽度，我们将布局视图设置为理想的图像端口。 ？视图通常为 980 像素。在移动端，以iPhone 6为例，分辨率为375*667，这意味着布局的视图理想情况下为375像素。例如，现在我们有一个 750px * 1134px 的视觉草图，那么在 PC 端 CSS 像素可以计算如下：

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

而在 iPhone 6 上：

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

也就是说，在 PC 端 CSS 像素可以使用 0.76 个物理像素，而 iPhone 6 上的一个 CSS 像素代表两个物理像素。另外，不同的移动设备具有不同的分辨率，即1个CSS像素可以表示的物理像素是不同的。因此，如果在CSS中只使用px作为长宽单位，结果是无法用样式来实现。两端适配。

2.媒体查询

前面我们提到过，css文件中1px所代表的物理像素大小在不同的设备上是不同的。因此，不可能实现每个头多种款式的定制。整合。我们是这样想的：

如果一种风格不够，我们是否可以给每个设备不同的风格，以达到自适应的效果？

答案是肯定的。

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

上面的代码通过媒体查询定义了多种样式，并通过最大宽度设置样式生效时的最大分辨率。上面的代码定义了0-320px、320px-550px和550px之间的分辨率~768px和768px-960px显示器设置了不同的背景颜色。

媒体查询可用于通过为不同分辨率的设备编写不同的样式来实现响应式布局。例如，我们可以在不同分辨率的屏幕上设置不同的壁纸。例如，为小屏幕手机设置@2x图像，为大屏幕手机设置@3x图像，可以通过媒体查询轻松完成。

但媒体民意调查的弊端也很明显。如果随着浏览器尺寸的变化需要改变的样式太多，多个样式代码集就非常麻烦。

3。百分比

除了使用px函数结合媒体查询来实现响应式布局之外，我们还可以使用百分比单位“%”来实现响应式效果。

例如，当浏览器的宽度或高度发生变化时，可以使用百分比单位，使浏览器组件的宽度和高度随着浏览器的变化而变化，从而产生响应式的效果。

要理解百分比布局，首先要明白一个问题：

css子元素的百分比（%）属于谁？

直观的理解，我们可以认为子元素的百分比与主元素成正比，高度百分比与高度成正比，宽度百分比与宽度成正比。这个理解当然是正确的，但是根据CSS盒子模板，除了height和width属性之外，它还有padding、border、margin等属性。那么当这些属性设置为百分比时，它们是基于父元素的属性吗？此外，边框半径和翻译等属性也有百分比。它们有什么关系？下面我们来详细分析一下。

1。百分比的特殊分析

(1) 子元素的高度和宽度的百分比

子元素的高度或宽度中使用的百分比是相对于子元素的直接上层元素而言的，宽度是相对的。到主元素的宽度和高度是相对于主元素的高度。示例：

<div class="parent">
  <div class="child"></div>
</div>
复制代码

如果设置：.father{ width:200px;高度：100px； } .child{ 宽度:50%;高度：50%；显示的效果为：

(2) top and Bottom, left 如果右

子元素的top和bottom设置为百分比，则它们相对于父元素的高度具有直非-静态定位（默认定位）。同样，如果

子元素的左侧和右侧设置为百分比，则它们与放置的主元素（默认位置）的高度成正比。非静态定位（默认定位）父元素的宽度。

显示的效果为：

（3）padding

如果子元素的padding设置为百分比，无论是垂直还是水平，都与直接父元素的宽度成正比。 ，主元素的高度为 None 。

例如：

.parent{
  width:200px;
  height:100px;
  background:green;
}
.child{
  width:0px;
  height:0px;
  background:blue;
  color:white;
  padding-top:50%;
  padding-left:50%;
}
复制代码

显示的效果为：

子元素原来宽高为0，顶部元素可以扩展到满。上图蓝色部分是一个正方形，页面长度为100像素，意味着无论宽度或高度，如果设置为百分比，padding都与父元素的宽度成正比。

(4) margin

与 padding 类似，margin 也是如此。如果子元素的边距设置为百分比，无论是垂直还是水平，它都是相对于直接父元素的宽度。这里就不具体举例了。

(5) 边界半径

边缘半径不同。如果将边缘半径设置为百分比，则它是相对于其自身宽度的。例如：

  <div class="trangle"></div>
复制代码

设置边框半径为百分比：

.trangle{
  width:100px;
  height:100px;
  border-radius:50%;
  background:blue;
  margin-top:10px;
}
复制代码

显示效果为：

除了边框半径之外，还有平移、背景大小等，这些都是相对于自身而言的。这里我就不举例了。

2。百分比单位布局应用

百分比单位在布局中应用广泛。这是应用程序。

比如我们要实现一个固定长宽比的矩形，如果我们要实现一个长宽比为4:3的矩形，我们可以基于fill属性来实现，因为padding是垂直的或横向，百分比相同。相对于顶部元素的宽度，我们可以将padding-top设置为百分比，得到一个长宽自适应的矩形：

<div class="trangle"></div>
复制代码

将样式设置为自适应：

.trangle{
  height:0;
  width:100%;
  padding-top:75%;
}
复制代码

通过设置padding-top：75% ，比例为宽度的75%，所以这就形成了一个长宽高比恒定的矩形。具体效果如下：

3。百分比单位的缺点

从上面对百分比单位的介绍，我们不难看出，如果一切都用百分比单位来实现响应式布局，有以下两个明显的缺点：

（1）计算困难。如果我们要根据设计草图定义元素的宽度和高度，就必须将其转换为百分比单位。 (2)从1可以看出，如果每个属性都使用百分比，则与父元素关联的属性不是唯一的。例如，width和height是相对于父元素的宽度和高度，而margin和padding是相对于父元素的宽度，无论是垂直还是水平，border-radius是相对于元素本身的等等。可以让我们轻松地使用百分比来使布局问题变得复杂。

4. 自适应场景下的Rem解决方案

1.远程单元

首先我们来看看什么是远程单元。 rem 是一个灵活的、可扩展的单位，可以转换为像素并显示在浏览器中。与 em 单位不同，rem 单位仅相对于浏览器根元素（HTML 元素）的字体大小，而与嵌套级别无关。默认情况下，html元素的字体大小为16px，因此：

    1 rem = 12px
复制代码

为了使计算更加方便，通常可以将html字体大小设置为：

    html{ font-size: 62.5% }
复制代码

本例为：

    1 rem = 10px
复制代码

2。通过 rem 实现 响应式布局

rem 单位是相对于根元素的 html 字体大小定义的。根元素的字体大小对应于给出一个基准。当页面大小改变时，只需要改变字体大小。 size 值，那么固定单位为 rem 的元素的大小也会随之改变。因此，如果使用 rem 命令实现响应式布局，只需根据视口的大小动态改变字体大小即可。

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
复制代码

上面的代码将视图容器分为10份，字体大小用宽度的十分之一来表示。最后，通过在 header 标签中运行这段代码，可以用 1rem 动态确定字体大小的大小，在不同的视觉容器中代表不同的大小，并且使用 rem 固定单位可以实现在不同容器中的自适应布局。

3。 rem2px 和 px2rem

如果在响应式布局中使用 rem 单位，则存在单位转换问题。 rem2px 表示从 rem 转换为 px。我不会再谈论这个了。只需用相应的字体说出 rem 即可。大小可以转换为px。更多的应用是px2rem，即从px转换为rem格式。

作为示例给出的视觉草图为 750 像素（物理像素）。如果我们想用rem来表示所有布局单位，一个愚蠢的方法是将所有元素（例如高度和宽度）乘以相应的For比率，现在将视觉草图转换为rem单位，然后以rem单位单独表示。另一个更方便的解决方案是我们在css中仍然使用px元素来描述大小。当你最终编写完css代码后，将css文件中的所有px单位转换为rem单位。

Px2rem 原理也很简单。目标是以 px 为单位预处理 css 文件，并在处理后将所有 px 转换为 rem 单位。可以通过两种方式实现：

1）Webpack加载器格式：

npm install px2rem-loader
复制代码

在webpack配置文件中：

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

}

2）使用webpack插件 webpack插件。 ，具体是引入了相应的postcss插件，从设计稿中省去了px到rem的计算。国外一些网站也使用rem单位。这里，使用rem来实现布局的缺陷或者小缺陷是：

在响应式布局中，必须使用js动态控制根元素的font-size。

也就是说，css样式和js代码之间存在一定的联系。并且改变字体大小的代码必须放在css样式之前。

5。通过 vw/vh

1 实现适应性。 vw/vh 是什么？

CSS3 引入了与视口相关的新单位 vw/vh。 vw表示相对于窗口的宽度，vh表示相对于窗口的高度。除了 vw 和 vh 之外，还有两个相关单位：Vmin 和 vmax。各个单位的特殊含义如下：

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

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