Web移动端布局

逻辑像素和物理像素

逻辑像素也叫『设备独立像素』，即CSS像素，例如，iPhone 6的逻辑像素是375px

物理像素是设备屏幕实际拥有的像素点，设备生产出来，像素就确定了，例如，iPhone 6的物理像素是750px

在iPhone 6下，物理像素是逻辑像素的2倍，用『设备像素比』表示该值，即物理像素除以逻辑像素的值，通过window.devicePixelRatio获取设备像素比

viewport视口

一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口(layout viewport)，用于解决早期的 页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以PC上的网页基本能在手机上呈现，只不 过元素看上去很小，一般默认可以通过手动缩放网页。

为了解决这个问题，可通过meta标签来修改视口的尺寸大小

<meta name="viewport" content="width=device-width, initial-scale=1.0" minimum-scale="1.0" maximum-scale="1.0" user-scalable="no">

• width=device-width表示视口宽度为设备的宽，也就是逻辑像素的大小
• initial-scale=1.0表示初始缩放比例为1，即 正常大小
• maximum-scale表示放大的最大比例
• minimum-scale表示缩小的最小比例
• user-scalable表示是否允许用户手动缩放页面，默认yes

window.innerWidth可以获取设备的宽度。
document.documentElement.clientWidth可以获取视口的宽度。
当viewport的width的值是device-width，设备的宽度等于视口的宽度

rem单位

CSS中，rem表示root元素的字体大小。(root元素即html元素)
即，1rem等于root元素的字体大小，对于大多数的浏览器，默认值是16px。

html {
    font-size: 12px; /* 此时， 1rem = 12px */
}
.box {
    width: 2rem; /* 2x12=24px */
}

不同的设备的视口是不同的，所以在不同的设备中root元素的font size值也不同，以此来达到缩放的效果。
计算root元素的font size有两种方法：

• 利用JS计算根元素的font size值
• vw

JavaScript计算rem值

以iPhone6为基准，屏幕宽度为375，root元素的font size计算如下：

function onWindowResize() {
  let documentElement = document.documentElement;
  let viewportWidth = documentElement.clientWidth;

  // 在CSS中计算rem的时候也是以37.5px为基准
  documentElement.style.fontSize = viewportWidth / 10 + 'px';
  documentElement.setAttribute('data-dpr', window.devicePixelRatio);
}

window.addEventListener('resize', onWindowResize);
window.addEventListener('load', onWindowResize);

通常移动端UI设计稿按照iPhone6的物理像素为基准进行设计，即750px，在量取尺寸的时候，需要除以2才能适配页面中的css逻辑像素

@function px2rem($px) {
    $base: 37.5;
    @return calc($px / 2 / $base) * 1rem;
}

37.5px就是基准值，和JS代码中的保持一致。假如A元素在设计稿上的宽度是120px，那么在iPhone6上就是1.6rem。

当手机切换到iPhone XR时，root元素的font size的值就变成了41.4px，因为A元素的宽度是1.6rem，那么它的实际宽度就是41.4 x 1.6 = 66.24，这就起到了缩放效果。

总结两点：

• 动态计算html的font-size值
• 在CSS中将px转为rem

rem + vw

利用vw计算root元素的font size值就不需要用JS去动态计算根元素的字体大小。其他布局元素用rem做单位。

750px的设计稿，root元素字号100px，换算成vw，就是100/750 = 13.33333333vw;

通过CSS计算函数自动计算：

:root {
    --psd: 750;
    --root-font-size: 100;
}
html {
    font-size: calc(100vw / var(--psd) * var(--root-font-size))
}

@media screen and (min-width: 750px) {
    html {
        font-size: 100px;
    }
    body {
        width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
}

最后，设计稿元素的大小直接除以100换算成rem单位

@function pxtorem($px) {
    @return calc($px / 100) * 1rem;
}

另一种计算方式是按照手机尺寸计算，以iPhone 6为准，就是375px，在量取尺寸时需要除以2，因为设计稿是750px的

// 按照iPhone 6的逻辑像素计算，即375px
100vw = 375px => 1px = 100/375 = 0.26666667vw;
100px = 0.26666667 * 100 = 26.66666667vw;

vw

使用vw布局就不需要去设置根元素的font size了

页面所有元素都用vw做单位。设计稿750px=100vw，

$psd: 750;
/**
        $px                    $vw
    -------------    ===    ------------
        $psd                    100vw
*/
@function pxtovw($px) {
    @return calc($px / $psd) * 100vw;
}