移动端适配

时间 2020-07-07

标签移动适配栏目无线繁體版

原文原文链接

开发背景和现状

1. 开发移动端H5页面

2. 面对不一样分辨率的手机

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

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

屏幕宽度/高度 js：scree.height/screen.width ; css: @media all and (width/height: 600px){} https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries(概念：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，viewportlayoutviewportjavascript

【http://www.w3cplus.com/css/viewports.html】

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文件，称之为视觉稿。css

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

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，就能够解决高清问题？前端

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

系统/字体	中文	英文	数字
ios系统	Heiti SC	Helvetica	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。针对咱们这份视觉稿能够计算出：android

1a   = 7.5px1rem = 75px

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

如何快速计算

在实际生产当中，若是每一次计算px转换rem，或许会以为很是麻烦，或许直接影响你们平时的开发效率。为了能让你们更快进行转换，咱们团队内的同窗各施所长，为px转换rem写了各式各样的小工具。git

CSSREM

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

有关于CSSREM如何安装、配置教程能够点击这里查阅。web

CSS处理器

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

Sass

使用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的工具px2rem。安装好px2rem以后，能够在项目中直接使用。也可使用PostCSS。使用PostCSS插件postcss-px2rem：

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;
}

为了能更好的利于开发，在实际开发中，咱们能够定制一个font-dpr()这样的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;}
}

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

@include font-dpr(16px);

固然这只是针对于描述性的文本，好比说段落文本。但有的时候文本的字号也须要分场景的，好比在项目中有一个slogan,业务方但愿这个slogan能根据不一样的终端适配。针对这样的场景，彻底可使用rem给slogan作计量单位。

CSS

原本想把这个页面的用到的CSS(或SCSS)贴出来，但考虑篇幅过长，并且这么简单的页面，我想你们也能垂手可得搞定。因此就省略了。权当是给你们留的一个做业吧，感兴趣的能够试试Flexible可否帮你快速完成H5页面终端适配。