【移動適配】移動Web怎麼做屏幕適配(一)

2021-02-13 聽啃先生說H5
我們討論的是網頁適配多種尺寸屏幕，讓網頁效果看起來和設計師的設計稿一樣。說白了就是同一套代碼在不同解析度的手機上跑時，頁面元素間的間距，留白，以及圖片大小會隨著變化，在比例上跟設計稿一致。

圖1.  260*400的屏幕

圖2.  380*400的屏幕

上邊的頁面在不同大小屏幕上的展現，咋一看沒什麼問題，一般的工程師會認為已經OK了，所以前端工程師很容易忽略屏幕適配。但是對於一些精益求精的產品而言，這還達不到要求。例如有以下問題：圖1的屏幕的尺寸較小，因此頭像應該小些，話題左邊的空白也應該小一些。圖片應該保持正方形，而且兩張圖之間的邊距應該隨屏幕變化而變化
明白了，所以padding，margin，圖片等的大小基本都要做適配關鍵要找到一種長度單位，使得一樣的取值，在不同尺寸的屏幕上的大小按比例縮放。我將在下一期的文章裡推有關viewport和css像素px中的細節，這篇文章只關注如何適配，所以先只談結論：網頁在viewport中布局，viewport被分成一個個小方塊，一個CSS像素佔一個方塊在設置了viewport寬度等於設備寬度的情況下，通過某種算法，在不同大小的屏幕上，1個CSS像素所佔屏幕的物理尺寸是一樣大的
既然1個CSS像素在不同屏幕上物理尺寸一樣大，那px肯定不能做為適配的方法了 長度單位rem是相對於html標籤的font-size來計算的。例如html標籤設置font-size:36px，同時div設置width:1.2rem。那麼這個div的寬度就是1.2rem=36px*1.2=43.2px如上面的例子，如果加載頁面的時候，使用JS根據屏幕的大小動態設置html標籤的font-size，隨著html標籤font-size的值變化，div的1.2rem換算成px的值 也跟著變化，即實現了div隨屏幕大小變化而變化，而CSS代碼始終是width:1.2rem。以此類推到頁面所有的元素。明白了，奧秘就在於結合px的固定尺寸和rem的相對尺寸！

啃先生，原理我明白了，你有沒有可執行的具體方案 😳？

業內比較流行的做法（參考阿里的flexible），有以下要點：

設置viewport為設備寬度（這裡不一定，但目前先這樣足矣）將viewport分成10rem，並計算出1rem在當前瀏覽器的像素值，把它賦予html標籤的font-size（分成10rem只是為了方便計算而已）寫CSS代碼時，遇到要適配的地方，比如width，margin，padding等，就不要再用px了，改成用rem代碼量很少，就是要理解消化。有一個問題，設計師給的設計稿尺寸單位都是用px，但是剛剛說的第3步，寫CSS的時候要用rem，這個怎麼換算？會很麻煩 現有設計師提供寬度為400px的設計稿，其中某個圖片的寬度設計為20px，那麼，CSS的寫法就是img{width: 0.05rem;}，怎麼得出這個結果的呢？設計稿的寬度視同手機寬度，即假設有一個viewport為400px的手機

且慢，豈不是意味著，每次寫到尺寸的地方，我都要先在草稿紙上把設計師給的px換算成rem？別急，sublime text 3有一款插件可以幫助你進行這個換算，你只需要輸入20px，它會自動幫你換算成 0.5rem，看以下圖就秒懂了


使用Flexible實現手淘H5頁面的終端適配（https://github.com/amfe/article/issues/17）移動端高清、多屏適配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）

移動適配這個會作為一個小系列來寫，下期寫瀏覽器是怎麼計算CSS像素的，它在不同屏幕上的差異。


相關焦點

  • 關於移動端適配,你必須要知道的
    本文將從移動端適配的基礎概念出發，探究移動端適配各種問題的解決方案和實現原理。一、英寸一般用英寸描述屏幕的物理大小，如電腦顯示器的 17、 22，手機顯示器的 4.8、 5.7等使用的單位都是英寸。賈伯斯在 iPhone4的發布會上首次提出了 RetinaDisplay(視網膜屏幕)的概念，它正是解決了上面的問題，這也使它成為一款跨時代的手機。
  • dedecms首頁SEO優化方法詳解,PC移動適配通用seo設置方法
    獨立PC端和移動m端首頁SEO優化代碼如果將網站分開分別製作了PC模板和移動m端模板，那麼需要進行pc-移動適配。相關的規則可在百度資源平臺找到說明，為了方便一下子都說明白，就直接寫出來。PC網頁模板一、PC端添加移動適配代碼打開網站根目錄\templets\default\index.htm文件，在head標籤裡面添加如下代碼
  • 移動端適配(二)實操篇,前端必掌握技能
    , initial-scale=1.0, maximum-scale=1.0, user-scalable=no">2) 通過媒體查詢根據設備屏幕尺寸改變html中的font-size值來達到適配行動裝置屏幕。
  • 懶人必備丨移動端定寬網頁適配方案
    今天作者 @JerryZou 就給大家介紹一種懶人必備的移動端定寬網頁適配方法。如今行動裝置的解析度紛繁複雜。以前僅僅是安卓機擁有各種各樣的適配問題，如今 iPhone 也擁有了三種主流的解析度，而未來的 iPhone 7 可能又會玩出什麼新花樣。如何以不變應萬變，用簡簡單單的幾行代碼就能支持種類繁多的屏幕解析度呢？今天就給大家介紹一種懶人必備的移動端定寬網頁適配方法。
  • 移動端適配(一)設備獨立像素1px問題,前端需要知道
    1vw等於視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度。同理，1vh等於視口高度（viewport height）的百分之一。vw,vh是css3中新增的單位。小程序最近很火，它在它的開發文檔裡也提到這個單位，用來做適配。也就是說小程序是支持這兩個單位的。驗證了那句話，事出必有因。2.然後你需要知道什麼是屏幕尺寸、屏幕解析度、屏幕像素密度？屏幕尺寸：指屏幕的對角線的長度，單位是英寸。
  • 移動雲坐席適配安卓10
    近日，隨著2019年Android Q(安卓10 )版本的升級和大量適配該作業系統的手機大量普及，優音通信緊隨全球移動端的技術演進腳步，正式發布適配Android Q(安卓10 )版本的移動雲坐席產品，既滿足優音通信廣大在網客戶的實際需求，也展現了優音通信應用技術與研發產品的快速響應和升級能力，本次適配升級不但贏得了客戶的讚譽
  • 行動裝置適配基礎知識速成
    我們都知道現在行動裝置屏幕尺寸非常多，不同的屏幕尺寸又分裂出很多的屏幕解析度，以手機為例iphone和android的屏幕解析度就有：480×800、480×854、540×960、640×960、640×1136、720×1280、750×1334、1080×1920、1242×2208和越來越流行的2K屏。
  • Flexible.js――淘寶官方h5移動適配解決方案
    H5頁面雖然簡單，但是要適配不同的終端。不信你看：對於這種問題，淘寶的設計和前端團隊從以下三點入手：選擇一種尺寸作為設計和開發基準定義一套適配規則，自動適配剩下的兩種尺寸(其實不僅這兩種，你懂的)特殊適配效果給出設計效果
  • 網站不支持移動端適配,則會影響谷歌搜索排名
    搜尋引擎老大哥，谷歌最近在海外的站長大會上發布了一條新規，要求在谷歌上收錄的網站要能夠支持移動端適配，即用戶訪問的頁面和根據PC或移動端的情況進行自適應，從用戶體驗的角度體驗的角度出發是對的，而且若PC站點沒有做移動端適配的話，估計將減少收錄，作為關鍵詞排名的因素之一。
  • Android解析度適配寶典
    根據上一期調查結果顯示，大多數朋友希望分享關於移動端相關的教材，那麼今天就和大家說說移動端Android的解析度適配問題。        有多少射雞師在設計APP時遇到適配問題被逼瘋了，下面就給你一個再也不瘋的理由。
  • Android 10 適配攻略,你適配了嗎?
    Environment.isExternalStorageLegacy()) {    }這樣的好處是你可以在用戶升級後，能方便的將用戶的數據移動至應用的特定目錄。否則你只能通過SAF去移動，這樣會非常麻煩。如果你要移動數據注意只適用於Android 10下，所以現在適配反而是一個好時機。
  • 雲適配榮膺2013年RedHerring 亞洲100強
    亞洲新星 -- 雲適配 雲適配由前微軟美國總部IE瀏覽器核心研發團隊成員及移動網際網路行業專家在美國西雅圖創立，旨在解決網頁在不同行動裝置屏幕上的適配瀏覽問題。 雲適配技術已逐漸成為行業標準技術，凡通過雲適配的PC網站，在移動端網頁可實現：網址不變、內容實時自動更新、支持動態頁面生成。目前，雲適配為全球獨家的一行代碼適配技術實現者。 雲適配不僅幫助企業快速將桌面版網站適配到各種行動裝置終端的屏幕上，大幅度地節省了企業開發和維護移動網站的費用，還顯著地提高了企業網站的移動銷售額。
  • 慕課網v2.2.1登陸AppStore 適配iphone6
    【IT168廠商動態】作為移動端IT學習的首選軟體，慕課網以免費、實用的優質課程俘獲了大批用戶，並成為IT入門、職場晉升利器。近日慕課網v2.2.1全新版本在App Store發布，該版本不僅新增了消息功能、優化了好友消息，同時專門適配iphone6/6 plus，成為首款適配大屏幕iPhone的教育類應用。
  • 一種粗暴快速的Android全屏幕適配方案
    一份年薪30萬的Android面試寶典，附答案作者：firedamp來源：http://www.apkbus.com/blog-177177-76719.html一、現狀由於Android碎片化嚴重，屏幕適配一直是開發中較為頭疼的問題。
  • 像素,解析度和適配
    當時的屏幕ppi是163px。而用戶在屏幕中可點擊的物理尺寸是7mm-9mm。我們以7mm來算，一英寸長度裡有163像素，一英寸有25.4mm，那麼7mm裡應該有多少像素呢？所以這個44px只是相對的長度，隨著屏幕ppi的改變會改變。如果不懂不這個可能就會死抓著這個44px不變，在任何解析度的屏幕中都是使用44px，這明顯是不對的。適配也是目前來說一些設計師比較頭疼的一個問題，有很多小細節需要我們去注意。
  • 139郵箱終端適配更新PAD版,觸屏版改版九宮格
    .cn，系統會根據手機屏幕大小、作業系統和瀏覽器智能適配最佳版本。       PAD網頁版更新，為ipad用戶提供極致體驗                                                                                                                 作為國內第一款免費移動郵箱產品，139郵箱延續其移動特性，推出PAD網頁版，是首家為ipad終端提供發簡訊功能的電子郵箱
  • 網際網路小白也能看懂的APP適配及基礎概念
    本文為AdBright知乎帳號發表的「《移動端設計規範及適配規則
  • 詳解px,dp,pt,sp,ppi,dpi及屏幕適配
    適配的原因適配是為了讓同一個界面在不同尺寸、不同解析度的設備上具備相同的顯示效。前文說了，設計師在出圖的時候，會根據屏幕ppi不同，已經輸出了1倍/2倍/3倍圖，為什麼還需要適配呢？我們以iphone5和iphone6舉例，iphone5和iphone6的ppi一樣，也就是說iphone5和iphone6屏幕上一個點都對應2個像素，而這兩種型號也都使用兩倍圖，因此一個圖片在兩塊手機屏幕上展示出的物理大小也是一樣的；但是iphone5和iphone6的屏幕的物理尺寸不同：iphone5的物理尺寸是4.0寸，iphone6的尺寸為4.7寸，因此還需要進行適配，以此來對屏幕中圖像進行調整
  • Creator | 解析度適配
    （設計解析度的高度自動撐滿屏幕高度）Fit Width：適配寬度（設計解析度的寬度自動撐滿屏幕寬度）Canvas 在做屏幕適配時，只會對整個遊戲的畫面進行縮放，並不會修改所在節點的尺寸，節點尺寸將默認跟設計解析度保持一致理想狀態下，遊戲設計解析度的寬高比和屏幕解析度的寬高比相同
  • Android屏幕適配之dp(最直觀的解讀)
    Android屏幕適配由來已久，關鍵在於屏幕尺寸與屏幕解析度的變化巨大。在成千上百種機型面前，px單位已難以適應。1.同樣尺寸，不同解析度：1080px的寬度上顯示100px 比例是100/1080720px的寬度上顯示100px 比例是100/7202.同解析度，不同尺寸：1080px在4.7寸上顯示100px 1080px在6.1寸上顯示100px如果使用多套px文件方案來適配，市面上少說上百種寸，需要的文件太多了。