经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » HTML5 » 查看文章
细说移动端 经典的REM布局 与 新秀VW布局-渔人码头-
来源：cnblogs　　作者：-渔人码头-　　时间：2018/9/25 20:06:50　　对本文有异议

和以往一样，本次项目也放到了 Github 中，欢迎围观 star ~

 

1. 前言

2. 基本概念

3. REM布局

4. VW布局

　实现单边边框1px

　实现多边边框1px

    实现边框圆角

　实现容器固定纵横比

5. REM + VW布局

6. 对比选择

    方案选择

    食用方式

 

一、前言

说到前端页面的布局方案，可以从远古时代的Table布局说起，然后来到 DIV+CSS布局，之后有了Float布局，Flex布局，Column布局，Grid布局等等。

而另一方面，还有一些 布局概念：

1. 静态布局

直接使用px作为单位

2. 流式布局

宽度使用%百分比，高度使用px作为单位

3. 自适应布局

创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局

4. 响应式布局

通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用

5. 弹性布局

通常指的是rem或em布局。rem是相对于html元素的font-size大小而言的，而em是相对于其父元素（非font-size的是相对于自身的font-size）

 

本文不对这些概念做太多的解释说明，主要记录一下整理过程中比较重要的点

如今移动端布局中免不了要支持高清设备，机型也比较复杂，需要一套比较完善的布局方案来支持（在整体结构上解决多设备宽的适配问题）。

淘宝的 Flexible 让REM布局得以流行开来，而此Flexible实现也有一些不足，此外，也涌现出了多种实现REM布局的方案

比如直接使用  html{ font-size:625%; } 基准值，配合JS来设置根元素字体大小

或者使用媒体查询来设置根元素字体大小

  1. 　　@media screen and (min-width: 320px) {
  2.         html,body,button,input,select,textarea {
  3.             font-size:12px!important;
  4.         }
  5.     }
  7.     @media screen and (min-width: 374px) {
  8.         html,body,button,input,select,textarea {
  9.             font-size:14px!important;
  10.         }
  11.     }

 

但使用rem来布局的方案并不太正统，它有一些hack的特点

比较规范的方式是使用vw单位，随之而来的就是后起之秀 VW布局

 

花了一些时间整理了REM布局和VW布局在实际页面中是如何运用的，如果你有兴趣，就往下看吧~

项目地址，欢迎围观~

 

二、基本概念

物理像素(physical pixel)

物理像素又被称为设备像素，它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。

设备像素比(device pixel ratio)

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

  1. 设备像素比 ＝ 物理像素 / 设备独立像素

在Javascript中，可以通过 window.devicePixelRatio 获取到当前设备的dpr。

在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配。

或者使用 resolution | min-resolution | max-resolution 这些比较新的标准方式

 

 

上图中， Retina为高清设备屏幕，它的一个css像素对应 了4个物理像素

 

位图像素

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示

如上图：对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。

所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。

如：200×300(css pixel)img标签，就需要提供400×600的图片。

缩放比 scale

缩放比：scale = 1/dpr

视窗 viewport

简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。

移动端的viewport太窄，为了能更好为CSS布局服务，所以提供了两个viewport:虚拟的visualviewport和布局的layoutviewport。

viewport的内容比较深，推荐阅读PPK写的文章，以及中文翻译

视窗缩放 viewport scale

在开发移动端页面，我们可以设置meta标签的viewport scale来对视窗的大小进行缩放定义

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

rem单位

font size of the root element.

rem就是相对于根元素<html>的font-size来做计算

视窗单位

  • vw : 1vw 等于视窗宽度的1%
  • vh : 1vh 等于视窗高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

 

兼容性：在移动端 iOS 8 以上以及 Android 4.4 以上获得支持

可以去 Can I use 或 css3test 查看兼容情况

 

三、REM布局

讲的太乱了？自己去看代码

rem布局的核心是设置好根html元素的font-size

一般来说，为了防止在高清屏幕下像素不够用导致模糊，我们拿到的设计稿是640px（iphone5 设备宽为320px）或750px的两倍稿（iphone6 设备宽为375px），按照设备宽度做了两倍的大小。

那开发的时候在CSS中要设置什么尺寸呢，如何做到一份设计稿适配到不同机型中

最佳方案是：在photoshop或其他工具中量出某个元素或图片或文字的尺寸，然后直接写到代码中。额外的适配不需要理会。

  1. width: px2rem(200);

基于此，可以使用SCSS来提供一系列的基础支持

  1. /* 移动端页面设计稿宽度 */
  2. $design-width: 750;
  3. /* 移动端页面设计稿dpr基准值 */
  4. $design-dpr: 2;
  5. /* 将移动端页面分为10块 */
  6. $blocks: 10;
  7. /* 缩放所支持的设备最小宽度 */
  8. $min-device-width: 320px;
  9. /* 缩放所支持的设备最大宽度 */
  10. $max-device-width: 540px;
  12. /*
  13.     rem与px对应关系，1rem代表在JS中设置的html font-size值（为一块的宽度），$rem即为$px对应占多少块
  15.         $px                     $rem
  16.     -------------    ===    ------------
  17.     $design-width              $blocks
  18. */
  19.  
  20. /* 单位px转化为rem */
  21. @function px2rem($px) {
  22.     @return #{$px / $design-width * $blocks}rem;
  23. }
  25. /* 单位rem转化为px，可用于根据rem单位快速计算原px */
  26. @function rem2px($rem) {
  27.     @return #{$rem / $blocks * $design-width}px;
  28. }

为了便于计算，我们将页面分为10个块，根据映射关系，我们只需要计算某个元素在页面中占了多少块（$rem），结合html中font-size的大小，就能在页面上设置好正确的元素大小

在对应的JS文件中

  1. var docElem = document.documentElement,
  2.         metaElem = document.querySelector('meta[name="viewport"]'),
  3.         dpr = window.devicePixelRatio || 1,
  4.         // 将页面分为10块
  5.         blocks = 10,
  6.         // 需要限制的最小宽度
  7.         defaultMinWidth = 320,
  8.         // 需要限制的最大宽度
  9.         defaultMaxWidth = 540,
  10.         // 计算的基准值
  11.         calcMaxWidth = 9999999;

将页面按照clientWidth进行分割成块，和CSS对应起来

  1. // 设置docElem字体大小
  2.     function setFontSize() {
  3.         var clientWidth = docElem.clientWidth;
  5.         clientWidth = Math.max(clientWidth, defaultMinWidth * dpr)
  7.         // 调整计算基准值
  8.         if (calcMaxWidth === defaultMaxWidth) {
  9.             clientWidth = Math.min(clientWidth, defaultMaxWidth * dpr);
  10.         }
  12.         docElem.style.fontSize = clientWidth / blocks + 'px';
  13.     }
  15.     setFontSize();
  17.     window.addEventListener(window.orientationchange ? 'orientationchange' : 'resize', setFontSize, false);

 

1px在高清屏幕中的显示问题

上图左边设置了css为1px的效果，实际上我们需要的是右边的效果

明显左边的粗了一些，因为此时1个css像素包含了4个（dpr为2）物理像素，实际需要的是1px的物理像素，而非css像素

为了解决这个问题，有很多方法

在REM布局中普遍采用的是viewport scale 视窗缩放的方式

视窗缩放很简单，其实就是直接将meta标签中的scale进行更改。比如dpr为3，则scale为

但缩放在某些安卓设备中支持度不太好，我们还需要做其他检测（检测了现用的一些机型，应该还不完整哈）

  1. // 大部分dpr为2以下的安卓机型不识别scale，需设置不缩放
  2.     if (navigator.appVersion.match(/android/gi) && dpr <= 2) {
  3.         dpr = 1;
  4.     }
  6.     setScale(dpr);
  8.     // 企业QQ设置了scale后，不能完全识别scale（此时clientWidth未收到缩放的影响而翻倍），需设置不缩放
  9.     if (navigator.appVersion.match(/qq\//gi) && docElem.clientWidth <= 360) {
  10.         dpr = 1;
  11.         setScale(dpr);
  12.     }
  14.     docElem.setAttribute('data-dpr', dpr);
  16.     // 设置缩放
  17.     function setScale(dpr) {
  18.         metaElem.setAttribute('content', 'initial-scale=' + 1 / dpr + ',maximum-scale=' + 1 / dpr + ',minimum-scale=' + 1 / dpr + ',user-scalable=no');
  19.     }

同时将最终计算的dpr放到html中，供css做一些特殊适配。看看页面效果

 

设置容器的最大最小宽度

上图中，随着拉伸，内容区越来越大，各元素尺寸也越来越大。已经进行了最小宽度的处理。

要控制缩放的程度，关键有两个点：尺寸计算基准、容器宽度

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>REM布局</title>
  5.         <meta charset="utf-8">
  6.         <meta lang="zh-CN">
  7.         <meta name="viewport" data-content-max content="width=device-width,initial-scale=1,user-scalable=no">
  8.         <link rel="stylesheet" href="./rem.css">
  9.         <script src="./rem.js"></script>
  10.     </head>
  11.  
  12.     <body data-content-max>
  13.         <section class="container">

尺寸计算基准位于 meta标签中的 data-content-max，容器宽度位于 body标签中

在JS中进行匹配控制，需要注意的是，因为我们已经进行了视窗的缩放，clientWidth将会比设备宽度大，要记得以dpr进行翻倍

  1.     // 需要限制的最小宽度
  2.     var defaultMinWidth = 320,
  3.         // 需要限制的最大宽度
  4.         defaultMaxWidth = 540,
  5.         // 计算的基准值
  6.         calcMaxWidth = 9999999;
  9.     if (metaElem.getAttribute('data-content-max') !== null) {
  10.         calcMaxWidth = defaultMaxWidth;
  11.     }
  14.     ...
  16.     // 设置docElem字体大小
  17.     function setFontSize() {
  18.         var clientWidth = docElem.clientWidth;
  20.         clientWidth = Math.max(clientWidth, defaultMinWidth * dpr)
  22.         // 调整计算基准值
  23.         if (calcMaxWidth === defaultMaxWidth) {
  24.             clientWidth = Math.min(clientWidth, defaultMaxWidth * dpr);
  25.         }
  27.         docElem.style.fontSize = clientWidth / blocks + 'px';
  28.     }

在CSS中，简单地调用一下，核心方法已经抽离

  1. html {
  2.     @include root-width();
  3. }
  1. /* html根的宽度定义 */
  2. @mixin root-width() {
  3.     body {
  4.         @include container-min-width();
  6.         &[data-content-max] {
  7.             @include container-max-width();
  8.         }
  9.     }
  11.     /* 某些机型虽然设备dpr大于1，但识别不了scale缩放，这里需要重新设置最小宽度防止出现横向滚动条 */
  12.     &[data-dpr="1"] body {
  13.         min-width: $min-device-width;
  14.     }
  15. }
  17. /* 设置容器拉伸的最小宽度 */
  18. @mixin container-min-width() {
  19.     margin-right: auto;
  20.     margin-left: auto;
  21.     min-width: $min-device-width;
  23.     @media (-webkit-device-pixel-ratio: 2) {
  24.         min-width: $min-device-width * 2;
  25.     }
  27.     @media (-webkit-device-pixel-ratio: 3) {
  28.         min-width: $min-device-width * 3;
  29.     }
  30. }
  32. /* 设置容器拉伸的最大宽度 */
  33. @mixin container-max-width() {
  34.     margin-right: auto;
  35.     margin-left: auto;
  36.     max-width: $max-device-width;
  38.     @media (-webkit-device-pixel-ratio: 2) {
  39.         max-width: $max-device-width * 2;
  40.     }
  42.     @media (-webkit-device-pixel-ratio: 3) {
  43.         max-width: $max-device-width * 3;
  44.     }
  45. }

要注意的是，这里的max-width也要配上dpr系数

看看成果图

 

如果仅仅限制计算基准值，容器不限制（将body标签中的属性去掉），就可以实现某种流式效果（另一种方案）

 

 文本大小是否用rem单位

有时我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

我们可以选择使用px直接定义

  1. /* 设置字体大小，不使用rem单位， 根据dpr值分段调整 */
  2. @mixin font-size($fontSize) {
  3.     font-size: $fontSize / $design-dpr;
  5.     [data-dpr="2"] & {
  6.         font-size: $fontSize / $design-dpr * 2;
  7.     }
  9.     [data-dpr="3"] & {
  10.         font-size: $fontSize / $design-dpr * 3;
  11.     }
  12. }
  1. @include font-size(30px);

当然了，如果要求不严格，也可以直接使用rem单位

 

四、VW布局

讲的太乱了？自己去看代码

REM布局中用到了JS来动态设置html的font-size，可能造成页面的抖动。

可以考虑比较新的VW布局，无需使用JS，虽说在移动端 iOS 8 以上以及 Android 4.4 以上才获得支持，不过还是值得一用的。如果需要兼容，可以尝试 viewport-units-buggyfill

在REM布局中处理1px问题是用了视窗缩放的方案，在VW布局中就不用了，转而使用容器缩放（transform）的方案

 

调用方式形如

  1. height: px2vw(300);

同样的，我们需要写个转换方法

  1. /* 移动端页面设计稿宽度 */
  2. $design-width: 750;
  3. /* 移动端页面设计稿dpr基准值 */
  4. $design-dpr: 2;
  6. /*
  7.     vw与px对应关系，100vw为视窗宽度，$vw即为$px对应占多宽
  9.         $px                    $vw
  10.     -------------    ===    ------------
  11.     $design-width              100vw
  12. */
  13.  
  14. /* 单位px转化为vw */
  15. @function px2vw($px) {
  16.     @return ($px / $design-width) * 100vw;
  17. }
  18.  
  19. /* 单位vw转化为px，可用于根据vw单位快速计算原px */
  20. @function vw2px($vw) {
  21.     @return #{($vw / 100) * $design-width}px;
  22. }

对于高清屏幕边框1px问题，有三个方面需要考虑

1. 单边边框

2. 多边边框

3. 边框的圆角

 

1. 单边边框比较简单，本质是在目标元素上加个伪类，设置宽度（左|右边框）或高度（上|下边框）为1px，然后在高清屏幕下对齐进行缩放

  1. transform-origin: 0 0;
  2. transform: scaleY(.5);

 

2. 要让伪类支持设置多边边框，已经不能仅仅使用宽度或高度，而应该在这个伪类上设置多边边框，然后设置dpr倍的宽高，再进行缩放（自左上方）

  1. width: 200%;
  2. height: 200%;
  4. transform-origin: top left;
  5. transform: scale(.5, .5);

 

3. 边框圆角一般作用于多边边框，使用了伪类设置边框之后，元素本身并没有边框，所以我们需要对伪类设置圆角，此外，也需要对元素本身设置圆角

否则就会出现这种尴尬的情况

 

如果只是需要设置圆角，其实也可以不设置边框，可以使用背景颜色来营造出这种“边框”的分界，在VW布局中，显示地设置边框可能会造成代码量太多

另外要注意的是，圆角如果设置为像素值（比如50px），在不同的dpr下它产生的圆角效果还是有区别的，所以最好也把dpr作为系数放在圆角中

 

针对上面三种情况，我们需要写好一个scss的1px边框生成器

先来看看怎么调用

  1. /* 底部单个边框 */
  2. .f-border-bottom {
  3.     @include border(
  4.         $direction: bottom,
  5.         $size: 1px,
  6.         $color: #ddd,
  7.         $style: solid
  8.     );
  9. }
  1. /* 常规多边边框 */
  2. .f-border {
  3.     @include border(
  4.         $direction: all,
  5.         $size: 1px,
  6.         $color: #ddd,
  7.         $style: solid
  8.     );
  9. }
  1. /* 多个边框不同的属性 */
  2.     &.hover {
  3.         @include border(
  4.             $direction: (top, right, bottom, left),
  5.             $size: (3px, 2px, 1px),
  6.             $color: (#0f0, #ddd),
  7.             $style: dotted
  8.         );
  9.     }

 

  1. /* 圆角边框百分比 */
  2. .f-border-radius {
  3.     @include border(
  4.         $direction: all,
  5.         $radius: 50%
  6.     );
  7. }
  1. /* 圆角边框自定义多个角，顺序 */
  2. .f-border-radius {
  3.     @include border(
  4.         $radius: (10px, 20px, 30px, 40px)
  5.     );
  6. }
  1. /* 多个边框调用 */
  2.     &:not(.info-item__tel) {
  3.         @include border(
  4.             $direction: all,
  5.             $size: 1px,
  6.             $color: #ddd,
  7.             $style: solid,
  8.             $radius: 50px
  9.         );
  10.     }

看起来调用方式还是有点复杂的，不过应该也还好吧，实在是实现不了像scale缩放那样直接写原生border属性，除非使用构建工具了

这个 border生成器 是怎么实现的呢？ Show you the code ..

  1. /**
  2.  * 元素边框
  3.  * @param  {string|list} $direction: all           为all或列表时表示多个方向的边框，否则为单个边框
  4.  * @param  {string|list} $size:      1px           边框尺寸，为列表时表将按照direction的顺序取值
  5.  * @param  {string|list} $style:     solid         边框样式，高清设备下仅支持solid，同上
  6.  * @param  {string|list} $color:     #ddd          边框颜色，同上
  7.  * @param  {string}      $position:  relative      元素定位方式，一般为relative即可
  8.  * @param  {string}      $radius:    0             边框圆角
  9.  */
  10. @mixin border(
  11.     $direction: all,
  12.     $size: 1px,
  13.     $style: solid,
  14.     $color: #ddd,
  15.     $position: relative,
  16.     $radius: 0
  17. ) {
  18.     /* 多个边框 */
  19.     @if $direction == all or type-of($direction) == list {
  20.         /* 普通设备 */
  21.         @media not screen and (-webkit-min-device-pixel-ratio: 2) {
  22.             @include border-radius($radius);
  24.             @if $direction == all {
  25.                 border: $size $style $color;
  26.             }
  27.             @else {
  28.                 @for $i from 1 through length($direction) {
  29.                     $item: nth($direction, $i);
  31.                     border-#{$item}: getBorderItemValue($size, $i) getBorderItemValue($style, $i) getBorderItemValue($color, $i);
  32.                 }
  33.             }
  34.         }
  36.         /* 高清设备 */
  37.         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  38.             @include border-multiple(
  39.                 $direction: $direction,
  40.                 $size: $size,
  41.                 $color: $color,
  42.                 $position: $position,
  43.                 $radius: $radius
  44.             );
  45.         }
  46.     }
  48.     /* 单个边框 */
  49.     @else {
  50.         /* 普通设备 */
  51.         @media not screen and (-webkit-min-device-pixel-ratio: 2) {
  52.             border-#{$direction}: $size $style $color;
  53.         }
  55.         /* 高清设备 */
  56.         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  57.             @include border-single(
  58.                 $direction: $direction,
  59.                 $size: $size,
  60.                 $color: $color,
  61.                 $position: $position
  62.             );
  63.         }
  64.     }
  65. }

入口 mixin 判断设备的dpr，然后选择直接生成border代码，或者分发到 border-single 和 border-multiple 中进行高清屏幕的处理

 

  1. /* 实现1物理像素的单条边框线 */
  2. @mixin border-single(
  3.     $direction: bottom,
  4.     $size: 1px,
  5.     $color: #ddd,
  6.     $position: relative
  7. ) {
  8.     position: $position;
  10.     &:after {
  11.         content: "";
  12.         position: absolute;
  13.         #{$direction}: 0;
  15.         pointer-events: none;
  16.         background-color: $color;
  18.         @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  19.             -webkit-transform-origin: 0 0;
  20.                     transform-origin: 0 0;
  21.         }
  22.  
  23.         /* 上下 */
  24.         @if ($direction == top or $direction == bottom) {
  25.             left: 0;
  26.             width: 100%;
  27.             height: $size;
  29.             @media only screen and (-webkit-device-pixel-ratio: 2) {
  30.                 -webkit-transform: scaleY(.5);
  31.                         transform: scaleY(.5);
  32.             }
  34.             @media only screen and (-webkit-device-pixel-ratio: 3) {
  35.                 -webkit-transform: scaleY(.333333333333);
  36.                         transform: scaleY(.333333333333);
  37.             }
  38.         }
  40.         /* 左右 */
  41.         @elseif ($direction == left or $direction == right) {
  42.             top: 0;
  43.             width: $size;
  44.             height: 100%;
  46.             @media only screen and (-webkit-device-pixel-ratio: 2) {
  47.                 -webkit-transform: scaleX(.5);
  48.                         transform: scaleX(.5);
  49.             }
  51.             @media only screen and (-webkit-device-pixel-ratio: 3) {
  52.                 -webkit-transform: scaleX(.333333333333);
  53.                         transform: scaleX(.333333333333);
  54.             }
  55.         }
  56.     }
  57. }
  1. /* 实现1物理像素的多条边框线 */
  2. @mixin border-multiple(
  3.     $direction: all,
  4.     $size: 1px,
  5.     $color: #ddd,
  6.     $position: relative,
  7.     $radius: 0
  8. ) {
  9.     position: $position;
  11.     @include border-radius($radius);
  13.     &:after {
  14.         content: "";
  15.         position: absolute;
  16.         top: 0;
  17.         left: 0;
  18.         pointer-events: none;
  19.         box-sizing: border-box;
  20.         -webkit-transform-origin: top left;
  22.         @media only screen and (-webkit-device-pixel-ratio: 2) {
  23.             width: 200%;
  24.             height: 200%;
  26.             @include border-radius($radius, 2);
  28.             -webkit-transform: scale(.5, .5);
  29.                     transform: scale(.5, .5);
  30.         }
  32.         @media only screen and (-webkit-device-pixel-ratio: 3) {
  33.             width: 300%;
  34.             height: 300%;
  36.             @include border-radius($radius, 3);
  38.             -webkit-transform: scale(.333333333333, .333333333333);
  39.                     transform: scale(.333333333333, .333333333333);
  40.         }
  42.         @if $direction == all {
  43.             border: $size solid $color;
  44.         }
  45.         @else {
  46.             @for $i from 1 through length($direction) {
  47.                 $item: nth($direction, $i);
  49.                 border-#{$item}: getBorderItemValue($size, $i) solid getBorderItemValue($color, $i);
  50.             }
  51.         }
  52.     }
  53. }

在多边边框中，pointer-events: none 的使用属于核心。为了能够看到伪类的边框，伪类将会被置于元素上方，如此便导致了元素被覆盖不可点击，这个css属性就解除了这个障碍。

圆角如果使用了百分比，就不需要设置dpr系数了

可以看到，不过这么一来，会造成代码比较冗余的问题，特别是当我们需要再次覆盖之前的边框属性时。

 

实现容器固定纵横比

纵横比其实还是第一次听说，做方案调研设计就一并整合过来了

它主要是用于响应式设计中的iframe、img 和video之类的元素，实现纵横比有很多方法

 这里使用 padding-top 百分比的方法，实现一下容器内文本区的固定纵横比

 

  1. /**
  2.  * 实现固定宽高比
  3.  * @param  {string} $position: relative      定位方式
  4.  * @param  {string} $width:    100%          容器宽度
  5.  * @param  {string} $sub:      null          容器的目标子元素
  6.  * @param  {number} $aspectX:  1             容器宽
  7.  * @param  {number} $aspectY:  1             容器高
  8.  */
  9. @mixin aspect-ratio(
  10.     $position: relative,
  11.     $width: 100%,
  12.     $sub: null,
  13.     $aspectX: 1,
  14.     $aspectY: 1
  15. ) {
  16.     overflow: hidden;
  17.     position: $position;
  18.     padding-top: percentage($aspectY / $aspectX);
  19.     width: $width;
  20.     height: 0;
  22.     @if $sub == null {
  23.         $sub: "*";
  24.     }
  26.     & > #{$sub} {
  27.         position: absolute;
  28.         left: 0;
  29.         top: 0;
  30.         width: 100%;
  31.         height: 100%;
  32.     }
  33. }
  1. /* 容器宽高比 */
  2. .header {
  3.     @include aspect-ratio(
  4.         // $width: px2vw(600),
  5.         // $sub: ".header-content",
  6.         $aspectX: 375,
  7.         $aspectY: 150
  8.     )
  9. }

padding的百分比是基于元素宽度的，将容器高度设为0，根据盒子模型，则整个元素最终的高度有padding-top来决定

子元素设置绝对定位防止被挤压，同时撑满父级容器，即可实现

 

从效果图能够看出，美中不足是无法设置容器最大最小宽度，vw是根据设备宽度进行计算的，所以无法解决。

 

五、REM + VW布局

讲的太乱了？自己去看代码

为了解决纯VW布局不能设置最大最小宽度的问题，我们引入REM。

通过配置html根元素的font-size为vw单位，并且配置最大最小的像素px值，在其他css代码中可以直接使用rem作为单位

调用方式炒鸡简单

  1. html {
  2.     @include root-font-size();
  3. }
  1. line-height: px2rem(300);

而scss里面的实现，同样是先定义一个映射关系。将页面宽度进行分块（只是为了防止值太大）

  1. /* 移动端页面设计稿宽度 */
  2. $design-width: 750;
  3. /* 移动端页面设计稿dpr基准值 */
  4. $design-dpr: 2;
  5. /* 将移动端页面分为10块 */
  6. $blocks: 10;
  7. /* 缩放所支持的设备最小宽度 */
  8. $min-device-width: 320px;
  9. /* 缩放所支持的设备最大宽度 */
  10. $max-device-width: 540px;
  12. /*
  13.     rem与px对应关系，1rem代表html font-size值（为一块的宽度），$rem即为$px对应占多少块
  15.         $px                    $rem
  16.     -------------    ===    ------------
  17.     $design-width              $blocks
  18. */
  19.  
  20. /* html根元素的font-size定义，简单地将页面分为$blocks块，方便计算 */
  21. @mixin root-font-size() {
  22.     font-size: 100vw / $blocks;
  24.     body {
  25.         @include container-min-width();
  26.     }
  27.  
  28.     /* 最小宽度定义 */
  29.     @media screen and (max-width: $min-device-width) {
  30.         font-size: $min-device-width / $blocks;
  31.     }
  32.  
  33.     /* 最大宽度定义 */
  34.     &[data-content-max] {
  35.         body[data-content-max] {
  36.             @include container-max-width();
  37.         }
  39.         @media screen and (min-width: $max-device-width) {
  40.             font-size: $max-device-width / $blocks;
  41.         }
  42.     }
  43. }
  1. /* 设置容器拉伸的最小宽度 */
  2. @mixin container-min-width() {
  3.     margin-right: auto;
  4.     margin-left: auto;
  5.     min-width: $min-device-width;
  6. }
  7.  
  8. /* 设置容器拉伸的最大宽度 */
  9. @mixin container-max-width() {
  10.     margin-right: auto;
  11.     margin-left: auto;
  12.     max-width: $max-device-width;
  13. }

这里的max-width直接使用宽度值，因为使用的是vw，视窗未缩放

而在页面标签（html和body）中，简单地配上属性代表是否需要限制宽度即可。

  1. <!DOCTYPE html>
  2. <html data-content-max>
  3.     <head>
  4.         <title>VW-REM布局</title>
  5.         <meta charset="utf-8">
  6.         <meta lang="zh-CN">
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  8.         <link rel="stylesheet" href="./vw-rem.css">
  9.     </head>
  10.  
  11.     <body data-content-max>

同样是计算基准值和容器宽度两个方面。

 

如果仅仅限制计算的基准值，也能实现“流式效果”

 

六、对比选择

1. 方案选择

方案是挺多的，可能也不够完善。要选哪种方案呢？

每个方案都能保证在不同机型下做到一定的适配。

1. 一般来说，可用直接考虑使用REM布局

2. 因REM使用了JS动态设置html的font-size，且scale对安卓机型不太友好，要求极致的可以选用VW

3. 纯VW布局不支持设置容器最大最小宽高，如果需要此功能则选用 REM + VW布局

 

 

2. 食用方式

怎么使用呢？

可在Github中对应目录的 html，js，css文件，看看是怎么调用的

常规方式是引入公共基础代码，然后在业务代码中调用

在html文件中可以配置 data-content-max 参数来限制最大最小宽度

在scss基础部分还可以自定义这几个值（如果是REM布局的，修改这些值还需要在rem.js 文件中同步修改）

  1. /* 移动端页面设计稿宽度 */
  2. $design-width: 750;
  3. /* 移动端页面设计稿dpr基准值 */
  4. $design-dpr: 2;
  5. /* 将移动端页面分为10块 */
  6. $blocks: 10;
  7. /* 缩放所支持的设备最小宽度 */
  8. $min-device-width: 320px;
  9. /* 缩放所支持的设备最大宽度 */
  10. $max-device-width: 540px;

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号