移動端網頁開發三（糾結適配的那些年）

時間 2019-11-10

標籤移動網頁開發糾結適配那些年欄目無線简体版

原文原文鏈接

　　前面兩篇文章介紹了移動端網頁開發所要具有的基礎知識。css

　　今天着重來說解移動端的適配方案。html

　　作PC端頁面的工程師聊的最多的是兼容，這是由於瀏覽器之間的差別引發的。而移動端基本是沒有兼容問題的，全是css3，簡直不要太開心。前端

　　可是最明顯的是適配問題。css3

　　什麼是適配呢？作PC頁面的時候，咱們按照設計圖的尺寸來就好，這個側邊欄200px，那個按鈕50px。但是，當咱們開始作移動端頁面的時候，設計師給了一份640px的設計圖。那麼咱們如何把這份設計圖實如今各個手機上的過程就是適配。web

　　我所接觸過的適配方法，目前是三種，若是有朋友知道更多的，麻煩請補充指教，能夠發送到本人郵箱1211050148@qq.com，共同窗習共同進步。瀏覽器

　　1️⃣固定高度，寬度自適應app

　　2️⃣固定寬度，viewport縮放佈局

　　3️⃣rem作寬度，viewport縮放學習

　　舉例說明：字體

　　1️⃣固定高度，寬度自適應

　　示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-height.html

　　這也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。騰訊、京東、百度、天貓、亞馬遜的首頁都是使用的這種方法。

　　隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體佈局差很少，在哪一個寬度須要調整的時候使用_響應式佈局_調調就行（好比網易新聞），這樣就實現了『適配』。

　　原理：

　　這種方法使用了完美視口：

　　2️⃣固定寬度，viewport縮放

　　示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-fixed-width.html

　　設計圖、頁面寬度、viewport width使用一個寬度，瀏覽器幫咱們完成縮放。單位使用px便可。

　　目前已知荔枝FM、網易新聞在使用這種方法。有興趣的同窗能夠看看是怎麼作的。

　　原理

　　這種方法須要根據屏幕寬度來動態生成viewport，生成的viewport基本是這樣：

　　640 是咱們根據設計圖定下的，0.5 是根據屏幕寬度動態生成的。

　　生成的viewport告訴瀏覽器網頁的佈局視口使用 640px，而後把頁面縮放成50%，這是絕對的等比例縮放。圖片、文字等等全部元素都被縮放在手機屏幕中。

　　這個gif圖說明了一切：

　　3️⃣rem作寬度，viewport縮放

　　示例：http://www.meow.re/demo/screen-adaptation-in-mobileweb/app-rem.html

　　根據屏幕寬度設定 rem 值，須要適配的元素都使用 rem 爲單位，不須要適配的元素仍是使用 px 爲單位。　　

　　原理：

動態生成 viewport
屏幕寬度設置 rem的大小，即給<html>設置font-size
根據設備像素比（window.devicePixelRatio）給<html>設置data-dpr

　　這麼設置的好處是可讓不一樣設備的rem或px都顯示同樣的長度。

　　設置rem

　　設置rem的意義在於獲得一個與屏幕寬度相關的單位，原本vw是最合適的，可是由於兼容性的問題，只能使用rem來作。這樣，讓不一樣設備的rem顯示同樣的長度。

　　vw是CSS3引入的單位，1vw = 1%窗口寬度

　　上面的佈局咱們能夠這樣：

html{

    font-size: 屏幕寬度 / 10;

}

.btn{

    width:8.75rem;

    height:1.25rem;

}

　　這樣，不管屏幕寬度是多少，.btn都是相對於屏幕的這麼寬，作到了適配。

　　設置 viewport 縮放和 data-dpr

　　這兩個設置實際上是乾的一件事，就是適配高密度屏幕手機的px單位。

.a{

  font-size:12px;

}

[data-dpr="2"] .a{

  font-size: 24px;

}

[data-dpr="3"] .a{

  font-size: 36px;

}

　　而縮放是動態的，這樣，不一樣設備下的px顯示同樣的長度。

　　以前說過CSS像素和物理像素與縮放、dpr都有關係，這裏說明：

在普通手機上，.a字體設置爲12px；

在dpr是2的手機上，[data-dpr="2"] .a字體爲24px，又由於頁面縮放50%，字體爲仍是12px

　　關於這部分適配的JS文件本人有作收藏，由於我以爲還須要細講一下，因此我準備放在下一篇來說解。

　　最後打個廣告，歡迎加入本人建立的前端qq羣399627992，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。