移動端適配

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

有了這樣的混合宏以後，在開發中能夠直接這樣使用：