移动端适配

2022-10-13  本文已影响0人  欢西西西

让页面在不同尺寸的设备上都能合理排版显示

前置知识

1. 设备的一些物理属性

image.png

2. 设备独立像素（device-independent pixel，简称DIP或DP）

设备独立像素是【独立于设备的】用于【逻辑上衡量尺寸】的单位，这样我们就不需要关注设备的物理分辨率了
我们在web开发布局时使用的px都是逻辑像素

3. DPR（设备像素比，devicePixelRatio ）

我们布局时使用的是逻辑像素，最终设备会将逻辑像素转换为实际的物理像素进行显示。DPR就描述的是设备物理像素与逻辑像素之间的转换关系：

设备像素比（DPR）：window.devicePixelRatio = 物理像素 / 逻辑像素。

了解了物理像素、逻辑像素、DPR之后，我们知道影响元素物理尺寸的是：元素所设置的px值、dpr、ppi
px值和dpr决定了显示元素所使用的物理像素数量，再由ppi（每英寸的像素数量）计算物理显示尺寸

4. 调整设备分辨率 / 浏览器缩放

image.png

移动端适配1——viewport

1. 布局视口

2. 理想视口

理想视口，最理想的视口大小——用户无需缩放或滚动就可以浏览横向的全部内容。它只是一种概念，用于指导开发者设计最理想的页面大小，它的宽度应为设备逻辑宽度。

3. 自定义viewport的尺寸

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性 注
width 定义视口宽度，单位为像素。值自定义或设为device-width，device-width表示设备逻辑宽度
height 设置layout viewport 的高度，很少使用
initial-scale 定义初始页面的缩放值，[0.0-10.0]（chrome 105上测试小于0.25的视为0.25，大于5的视为5）
minimum-scale 定义用户可缩小最小比例
maximum-scale 定义用户可放大最大比例
user-scalable 定义是否允许用户手动缩放页面，yes/no，默认值yes
width设置800，没有出现滚动条，而是自动缩放 对比width设置为device-width

将viewport设置到理想视口，使用户不需要进行拖动和缩放，是在移动端浏览网页获得良好体验的第一步

移动端适配2——相对单位之 rem

保持页面设计结构不变，大屏时让元素显示的更大，小屏则尺寸小一点，是适配各种设备的一种方法，使用rem能便捷地达到这种效果

:root { font-size: 20px; }

如何根据设计稿来使用rem？

  1. 先不考虑ui设计稿的整体尺寸，我们将设计稿上的1rem视为100px，也就是说设计稿上根节点font-size为100px。（因为100方便换算，不设置为10px的原因：chrome不支持小于12px的字号）。
  2. 假如设计稿上元素字体为20px，则换算为0.2rem，那么在任何设备，这个字体设置时都是0.2rem
  3. 当我们能把px都换算为rem，就只需要关注在不同宽度的设备上，将根节点的字号设置为多少px
  4. 以我们移动端ui设计稿为例，尺寸：750x1334px，是iphone6屏幕的物理分辨率。设计稿宽度为750px，我们之前将设计稿上的1rem视为100px。当设备逻辑宽度为375px，这个设备上1rem = 375 / (750 / 100) = 50px，即根元素的font-size需要设置为50px

  5. 在设备逻辑宽度不同时，根节点设置不同的font-size值


    移动端.png

使用插件将px换算成rem

是把设计稿上所有px都转成rem吗？

移动端适配3——相对单位之 vw / vh

vw和vh是相对于viewport的单位，也能实现【设备宽度不同时，网页元素宽高等比缩放】的效果
1vw = 1% viewport width
1vh = 1% viewport height

1. 换算

2. 与rem的对比

所以，使用vw比rem方便之处在于——这是个纯css方案，不需要使用js去关注当前设备的vw值。

3. vw和vh混用可能会导致元素变形

4. vh
我们总会遇到这种场景：底部按钮固定，上方表单区域滚动显示：

        :root {
            --height: 98px;
        }

        .form {
            height: calc(100vh - var(--height));
            overflow: auto;
        }

        .btn {
            height: var(--height);
        }

        .container {    
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .form {
            flex: 1;
            overflow: auto;
        }

        .btn {
            height: 98px;
        }

5. 兼容性

移动端适配4——媒体查询

rem和vw的方式都是等比缩放元素，但是移动设备越来越大并不是为了让元素越来越大，而是为了展示更多的内容。当不同尺寸的viewport需要不同的布局方式，这时就需要使用 媒体查询

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

结尾

1. 移动端1px问题

750x1334px的设计稿中，设计要求边框宽度为1px。

image.png

1.1 媒体查询：dpr为2及以上再使用0.5

.border {
  border: 1px solid #fff;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border-width: 0.5px;
  }
}

但这种方法只在ios上支持，安卓上小于1px的可能会四舍五入或当做0处理。所以出现了第二种方式：

1.2 伪元素模拟边框 + scale缩放
为伪元素设置1px的边框，在此基础上再利用transform: scale()缩小，避免直接使用小于1px值时各设备兼容性处理不同。

.border { position: relative; }
.border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

 /*---------注意这里----------*/
  box-sizing: border-box;
  width: 200%; /* 因为之后要缩小到0.5 所以初始尺寸先放大 */
  height: 200%;
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: top left;
 /*--------------------------*/
}

dpr为1的设备其实只需要正常使用1px，不需要缩放；dpr为2时scale(0.5)，dpr为3时应scale(0.3333)。可以配合媒体查询在不同dpr时设置不同的缩放值

:root {
  --borderScale: 1;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  :root {
    --borderScale: 0.5;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  :root {
    --borderScale: 0.3333;
  }
}

.border { position: relative; }
.border::after {
  /* ... */
  transform: scale(var(--borderScale));
  /* ... */
}

这种方法的缺点是对于已有伪元素的元素需要多层嵌套。
uView框架中也使用了缩放来处理线条：

image.png image.png

2. 微信小程序的rpx

image.png image.png

3. 小数问题

根据rem或vw去计算时，都会出现小数点问题，插件配置时给我们提供了小数位精度的选项，但如果需要展示小于1物理像素的部分，是无法精确处理的
https://isux.tencent.com/articles/105.html

上一篇 下一篇

猜你喜欢

热点阅读