移动端适配-白红宇

移动端适配

阅读量：5162 次

发布时间：2019-06-13

本文共 6157 字，大约阅读时间需要 20 分钟。

开发背景和现状

1. 开发移动端H5页面

2. 面对不同分辨率的手机

3. 面对不同屏幕尺寸的手机

影评移动端适配的相关因素：

屏幕宽度/高度 js：scree.height/screen.width ; css: @media all and (width/height: 600px){} (概念：media_query 查询,media_type类型, media_feature特性)

屏幕高宽比：scree.height/screen.width

设备像素比：window.devicePixelRatio，-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio

相关概念：

viewportvisualviewpor，viewportlayoutviewport

【】

layout viewport：document.documentElement.clientWidth/Height；

visual viewport：window.innerWidth/Height；

屏幕：screen.width and screen.height；

layoutviewport到底有多宽？每个浏览器都不同。iPhone上的Safari使用980px、Opera 850px，安卓的Webkit核心800px，IE974px

物理像素(physical pixel)：

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)：

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio )：

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向。

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

图：移动设备宽高占比（数据来源于友盟2015）

结论：178/100比例的设备占市场份额63%左右，178/100的视觉稿缩放等比缩放后能适配63%的设备。

使用场景：

使用环境：

环境	微信	qq空间	qq空间	微博	浏览器
导航栏	无	无	有	有	有
调试工具

屏幕模式：横屏/竖屏

三种模式：

auto：保持页面宽高比，使页面宽度占满，最常用，适合普通页面。

contain：保持页面宽高比，调整宽度或高度较大者，使页面完全包含在单屏内，页面内容垂直居中，背景用纯色，适用于单屏/滑屏页面。

cover：保持页面宽高比，调整宽度或高度较小者，使页面完全填满屏幕，超出部分被隐藏,，适用于单屏/滑屏且视觉稿边缘无重要内容。

开发流程：

1.视觉稿-切图

在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

1. 首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。

2. 对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。

问题：

1. 对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？

2. 对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)?

1. 对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题？

字体：中文字体默认，英文使用。即 body{font-family:Helvetica;}

系统/字体	中文	英文	数字
ios系统			HelveticaNeue
android 系统	Droidsansfallback	Droid Sans	Droid Sans
winphone 系统	Dengxian(方正等线体)	Segoe	Segoe

2.创建html模板

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="utf-8">

<metacontent="yes"name="apple-mobile-web-app-capable">

<metacontent="yes"name="apple-touch-fullscreen">

<metacontent="telephone=no,email=no"name="format-detection">

</head>

<body>

</body>

</html>

3.把视觉稿中的px转换成rem

目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1a   = 7.5px1rem = 75px

那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，<html>对应的font-size为75px：

如何快速计算

在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。为了能让大家更快进行转换，我们团队内的同学各施所长，为px转换rem写了各式各样的小工具。

CSSREM

是一个CSS的px值转rem值的Sublime Text3自动完成插件。这个插件是由编写。先来看看插件的效果：

有关于CSSREM如何安装、配置教程可以。

CSS处理器

除了使用编辑器的插件之外，还可以使用CSS的处理器来帮助大家处理。比如说Sass、LESS以及PostCSS这样的处理器。我们简单来看两个示例。

Sass

使用的同学，可以使用Sass的函数、混合宏这些功能来实现：

@function px2em($px, $base-font-size:16px) {    @if (unitless($px)) {        @warn"Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";        @return px2em($px + 0px); //That may fail.    } @elseif (unit($px) == em) {        @return$px;    }    @return ($px / $base-font-size) * 1em;}

除了使用Sass函数外，还可以使用Sass的混合宏：

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){    //Conver the baseline into rems    $baseline-rem: $baseline-px / 1rem * 1;    //Print the first line in pixel values@if$support-for-ie {        #{$property}: $px-values;    }    //if there is only one (numeric) value, return the property/value line for it.    @if type-of($px-values) == "number"{        #{$property}: $px-values / $baseline-rem;    }    @else {        //Create an empty list that we can dumpvalues into        $rem-values:();        @each$value in $px-values{            // If the value is zero ornot a number, return it            @if$value == 0or type-of($value) != "number"{                $rem-values: append($rem-values, $value / $baseline-rem);            }        }        // Return the property and its list of converted values        #{$property}: $rem-values;    }}

有关于更多的介绍，可以进行了解。

PostCSS(px2rem)

除了Sass这样的CSS处理器这外，我们团队的同学还开发了一款npm的工具。安装好之后，可以在项目中直接使用。也可以使用。使用PostCSS插件：

var gulp = require('gulp');var postcss = require('gulp-postcss');var px2rem = require('postcss-px2rem');gulp.task('default', function() {    var processors = [px2rem({remUnit: 75})];    return gulp.src('./src/*.css')        .pipe(postcss(processors))        .pipe(gulp.dest('./dest'));});

除了在Gulp中配置外，还可以使用其他的配置方式，详细的介绍可以进行了解。

配置完成之后，在实际使用时，你只要像下面这样使用：

.selector{    width:150px;height:64px;/*px*/font-size:28px;/*px*/border:1px solid #ddd;/*no*/}

px2rem处理之后将会变成：

.selector{    width:2rem;border:1px solid #ddd;}[data-dpr="1"].selector{    height:32px;font-size:14px;}[data-dpr="2"].selector{    height:64px;font-size:28px;}[data-dpr="3"].selector{    height:96px;font-size:42px;}

在整个开发中有了这些工具之后，完全不用担心px值转rem值影响开发效率。

字号不使用`rem`

前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。

显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div {    width: 1rem;     height: 0.4rem;    font-size: 12px; // 默认写上dpr为1的fontSize}[data-dpr="2"] div {    font-size: 24px;}[data-dpr="3"] div {    font-size: 36px;}

为了能更好的利于开发，在实际开发中，我们可以定制一个这样的Sass混合宏：

@mixin font-dpr($font-size){    font-size: $font-size;    [data-dpr="2"] & {        font-size: $font-size * 2;}[data-dpr="3"] & {        font-size: $font-size * 3;}}

有了这样的混合宏之后，在开发中可以直接这样使用：