移动端适配学习笔记（一）

视口

首先来了解一些基本概念：

布局视口

document.body.clientWidth 为手机浏览器viewport宽度（布局viewport），ios 默认980，其值等于meta标签中的width，常用：width=device-width ，initial-scale = 2,它会跟着缩小一倍。

使用js而不是媒体查询来编写业务逻辑的时候，

if(document.body.clientWidth >= 400){
　　//.class{...}
}

等价于

@media all and (max-width>=400){
　　.class{...}
}

我们用到的vw,vh尺寸单位代表布局视口的百分比，比如 width:50vh

视觉视口

屏幕上显示的网站区域尺寸，会受缩放的影响，值为 window.innerWidth

理想视口

它是对设备来说最理想的布局视口尺寸。

在手机上，桌面视口被拆分成两个——布局视口限制css布局，视觉视口决定用户能看到什么。

通常，会让浏览器直接使用它的理想视口，即把布局视口设置为理想视口，然后使用媒体查询来响应不同的理想视口就OK。

响应式设计的核心：width和height的媒体查询设置了当前布局视口的宽高。

使用最佳mate标签后，就可以放心的抛开布局视口的宽度，只专注于理想视口

@media all and (max-width:400) {
　　.class {
　　　　...
　　}
}

适配方案

一、强制meta viewport的宽度为设计稿的宽度

强制meta viewport的宽度为设计稿的宽度，然后制作稿跟PC上一样的制作就行，这个最简单，但不推荐。

// 根据设计稿的宽度来传参 比如640 750 1125
!function(designWidth){
    if (/Android(?:\s+|\/)(\d+\.\d+)?/.test(navigator.userAgent)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            var phoneScale = parseInt(window.screen.width) / designWidth;
            document.write('<meta name="viewport" content="width=' + designWidth + ',minimum-scale=' + phoneScale + ',maximum-scale=' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=' + designWidth + ',target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta name="viewport" content="width=' + designWidth + ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui,viewport-fit=cover">');
    }
}(640);

二、使用 rem 方式

rem 为长度单位，1rem 的长度换算为 px 等于 html 标签的 font-size 的值。计算尺寸时，只需要将对应的尺寸转为 rem 值。

例如，很多人使用的 Flexible，详细信息可以看这篇文章。

主要思路就是，首先使页面宽度等于设备宽度，禁止缩放。然后利用媒体查询，判断页面宽度，根据宽度，调整 html 标签的字体大小，然后内容的尺寸都根据设计稿的尺寸（px值）调整成 rem 值，实现根据页面宽度自动缩放。

具体有两种实现方式，一是对页面宽度进行梯度划分，当页面宽度超出某个范围，更改 html 的字体大小，好处是 rem 值数量有限，便于控制，不会出现不易处理的值，尤其，对内容的字体大小更容易控制，可以控制不出现显示效果不好的字体大小，但缺点是，当宽度突破临界值时，会造成整个页面突然变化，且变化幅度较大。另一种方法是，直接将 rem 的值与页面宽度挂钩，页面改变，等比例改变 rem 值，例如，Flexible 中，将 rem 的值等于页面宽度的百分之一，页面宽度改变，rem 值随之改变，也有对 Flexible 进行改造，将 rem 值与设计稿宽度关联，rem = width * 100 / designWidth;，使 1rem 的宽度等于设计稿的 100px，方便计算。此时，rem 的意义是，通过设计稿上标注的的尺寸，计算出长度值相对设计稿宽度的比例，在乘以页面的实际宽度，就得到了页面上的实际尺寸。这种方法会关注页面宽度的变化，随时做出反应。

三、使用 vm

vm 是相对于视区的宽度：视区宽度是100vw，“视区”所指为浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

利用 vm 替换上面方法中的 rem，作为长度的单位，可以达到相同的效果，特别是 Flexible，原本 1rem 就等于视区宽度的百分之一，利用 rem 模拟的 vm。具体可以看再聊移动端页面的适配

资料：