移动端适配

资料

再聊移动端页面的适配：https://www.w3cplus.com/css/vw-for-layout.html
阅读码：475709

使用Flexible实现手淘H5页面的终端适配：https://www.w3cplus.com/mobile/
阅读码：487741

移动端适配

尺寸相关概念

css像素（设备独立像素逻辑像素）抽象概念 px是一个相对单位取决于设备像素
设备像素（物理像素）分辨率不应该px应该pt
屏幕尺寸
像素密度（PPI）
像素比（DPR）

适配方案

媒体查询百分比 rem方案 vw布局

rem方案

rem是一个只相对于浏览器的根元素（HTML元素）的font-size的来确定的单位。默认情况下，html元素的font-size为12px

vw布局

vw ：相对于视口的宽度，视口宽度是100vw
vh ：相对于视口的高度，视口宽度是100vh
vmin ：vw和vh中较小的值
vmax ：vw和vh中较大的值

有一个比较厉害的插件—— postcss-px-to-viewport，可以预处理css,将px单位转换为vw单位。

{
    loader: 'postcss-loader',
    options: {
        plugins: ()=>[
            require('autoprefixer')({
                browsers: ['last 5 versions']
            }),
            require('postcss-px-to-viewport')({
                viewportWidth: 375,//视口宽度（数字）

                viewportHeight: 1334,//视口高度（数字）
                unitPrecision: 3,//设置的保留小数位数（数字）
                viewportUnit: 'vw',//置要转换的单位（字符串）
            //不需要进行转换的类名（数组）
                selectorBlackList: ['.ignore', '.hairlines'],
                minPixelValue: 1,//设置要替换的最小像素值（数字）
                mediaQuery: false// 允许在媒体查询中转换px（true/false）
            })
        ]
}

百分比和vw的区别

% ：width、height等大部分相对于直接父元素、border-radius、translate、background-size等相对于自身

vw ：只相对于视口宽度

移动前端开发之viewport的深入理解

viewport的概念

浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

css中的1px并不等于设备的1px

css像素和设备像素不是同一个东西。
devicePixelRatio = 物理像素 / 独立像素(css像素)。

PPK的关于三个viewport的理论

浏览器默认的viewport叫做 layout viewport(布局视口)：document.documentElement.clientWidth
浏览器可视区域的宽度叫做 visual viewport(视觉视口)：window.innerWidth
完美适配移动设备的viewport(不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适)叫做ideal viewport(理想视口)：只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。

利用meta标签对viewport进行控制

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

浏览器会取它们两个(content="width=400, initial-scale=1)中较大的那个值。（ps:在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

关于meta viewport的更多知识

关于缩放以及initial-scale的默认值

当前缩放值 = ideal viewport宽度 / visual viewport宽度
在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

动态改变meta viewport标签

//第一种方法可以使用document.write来动态输出meta viewport标签
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')


//第二种方法通过setAttribute来改变 
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

(如何在Vue项目中使用vw实现移动端适配(转))[https://www.jianshu.com/p/1f1b23f8348f?tdsourcetag=s_pctim_aiomsg]

用vue-cli启动一个项目

安装PostCSS插件

根目录下有一个.postcssrc.js默认配置了下面三个PostCSS插件

module.exports = {
    "plugins": {
        "postcss-import": {},//解决@import引入路径问题
        "postcss-url": {},//处理文件，比如图片文件、字体文件等引用路径的处理。vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去。
        "autoprefixer": {}//自动处理浏览器前缀。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。
    }
}

其他插件

安装npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

在.postcssrc.js文件对新安装的PostCSS插件进行配置：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     // (Number) The width of the viewport.
            viewportHeight: 1334,    // (Number) The height of the viewport.
            unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw',     // (String) Expected units.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

postcss-cssnext:使用CSS未来的特性，对这些特性做相关的兼容性处理。
cssnano:用来压缩和清理CSS代码。在cssnano的配置中，使用了preset: "advanced"，所以我们需要另外安装：npm i cssnano-preset-advanced --save-dev。禁用某个插件：

"cssnano": {
    autoprefixer: false,
    "postcss-zindex": false
}

postcss-px-to-viewport:主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位。

目前出视觉设计稿，我们都是使用750px宽度的，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程，不需要进行任何的计算，直接在代码中写px
在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中)：

<div class="box ignore"></div>

.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

//编译后
.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中带有.ignore类名，在这个类名写的`px`不会被转换*/
    background-color: red;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

哪些地方可以使用vw来适配我们的页面

容器适配，可以使用vw
文本的适配，可以使用vw
大于1px的边框、圆角、阴影都可以使用vw
内距和外距，可以使用vw

postcss-aspect-ratio-mini:主要用来处理元素容器宽高比。

目前采用PostCSS插件只是一个过渡阶段，在将来我们可以直接在CSS中使用aspect-ratio属性来实现长宽比。

postcss-write-svg:主要用来处理移动端1px的解决方案。该插件主要使用的是border-image(低端机支持度不好)和background来做1px的相关处理。

@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}

#example {
    background: white svg(square param(--color #00b1ff));
}

postcss-viewport-units:主要是给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作。

iphonex 适配

参考链接1

viewport-fit:contain

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

viewpoer-fit: cover + css canstant()

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

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

css的媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
  // iphoneX css部分
}

移动端适配

资料

移动端适配

尺寸相关概念

适配方案

rem方案

vw布局

移动前端开发之viewport的深入理解

viewport的概念

css中的1px并不等于设备的1px

PPK的关于三个viewport的理论

利用meta标签对viewport进行控制

关于meta viewport的更多知识

(如何在Vue项目中使用vw实现移动端适配(转))[https://www.jianshu.com/p/1f1b23f8348f?tdsourcetag=s_pctim_aiomsg]

用vue-cli启动一个项目

安装PostCSS插件

其他插件

iphonex 适配

推荐阅读更多精彩内容