移动端适配问题解决方案

2021-07-20 | 阅读：次

移动端适配问题

1.百分比方式

使用 百分比% 定义宽度，高度用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用 max-width / min-width 控制尺寸范围过大或者过小。下表是子元素不同属性设置百分比的依据。

优点：不存在兼容性问题，但是如果屏幕比例差距过大，就会使得图片尺寸拉伸。

2.rem方案

rem是相对长度单位，rem方案中的样式设计为相对于根元素的 font-size 的倍数。在设计过程中，根据屏幕的宽度动态去设计根元素的 font-size 。在布局的时候使用rem作为单位，来实现弹性布局。

const sizeInit = function(doc) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
            var clientHeight = docEl.clientHeight
            var clientWidth = docEl.clientWidth
            if (!clientHeight) return;
            var whr = clientWidth / clientHeight
            if (whr > 16 / 9) {
                docEl.style.fontSize = 14 * (clientWidth / 720) + "px"
                window.myfont = 14 * (clientHeight / 720);
            } else {
                docEl.style.fontSize = 14 * (clientWidth / 375) + "px"
                window.myfont = 14 * (clientHeight / 375)
            }
        }
    recalc();
    if (!doc.addEventListener) return;

    window.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);
}

export default sizeInit

这种方式的优点是：页面内容不会发生形变，页面不会因为拉伸而变形。

不足：

这不是一个纯css解决的问题，需要引入js代码来接这个问题，需要监听 orientationchange 和 resize 这两个事件，
该过程中计算出来的根元素的 font-size 一般来说都是小数（单位px），但是对于浏览器而言，最小的渲染单位是px，这样的话，很多元素都不能进行精准的绘制，比如说 border-radius 画的圆不圆，居中的没有办法居中。

3.vh/vw方案

原理：vh是视口展示的高度的1%，vw是视口展示的宽度的1%。vmin是vh和vw中比较小的那个，vmax是vh和vw中比较大的那个。

优点：不需要要借助别的js方法来实现，只需要通过css的方法就可以了。

4.基于媒体查询的响应式布局

这种方式工作量比较大，而且存在一定的节点，在节点附近的时候突然变化会对用户不友好。

@media only screen and (min-width: 375px){
    样式1
}
@media only screen and (min-width: 750){
    样式2
}

5.将px转化为vm/rem/em这样的响应式

在css的预处理器中都可以通过一定的方法进行这样的转换。

5.1 SASS实现

@function pxToEm ($px) {
  @return ($px/12) + em;
}

# Sass
.box {
    width: pxToEm(36);
}

# CSS
.box {
    width: 3em;
}

5.2 LASS实现

.pxToVW (@px, @attr: width) {
    @vw: (@px / 375) * 100;
    @{attr}: ~"@{vw}vw";
}

# Less
.box {
    .pxToVW(75);
    .pxToVW(150, height);
}

# CSS
.box {
    width: 20vw;
    height: 40vw;
}