構建自適應的手機頁面

itvincent 發布于2019-08-21 10:30 / 1467人閱讀

摘要：從事開發好多年，但是手機頁面開發較晚，所以最開始的時候，為了做微信應用的開發，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成熟的網站，分享出來，歡迎拍磚。

從事PC Web開發好多年，但是手機頁面開發較晚，所以最開始的時候，為了做微信應用的開發，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成熟的網站，分享出來，歡迎拍磚。

首先需要你對viewport有一個了解，建議看Apple官方文檔，雖然啰嗦，但是啃一遍，基本該明白的就全明白了。

第一種方案

簡便易行，適用情況：

網頁設計僅針對手機屏幕，并且沒有需要根據手機屏幕尺寸進行UI調整的內容，既沒有媒體查詢的CSS

產品層面可以不考慮非主流設備或瀏覽器的兼容性，例如黑莓的某些設備或搜狗瀏覽器這類的不支持640定寬渲染的瀏覽器

當手機橫豎切換時，能夠容忍部分手機在橫屏瀏覽網頁時，可能出現的問題(潛在問題)。

這個方案是強制讓手機瀏覽器按640的比例來呈現網頁，讓瀏覽器去做尺寸適配；這個方案我覺得其實非常好，絕大多數的場景都可以支持，而且開發起來簡單高效，不需要考慮各種尺寸和樣式表的單位換算問題。

這個方案有點類似css zoom，就是瀏覽器將整個網頁進行了縮放，注意一點：PC端的使用瀏覽器的開發工具進行縮放的時候，譬如使用iphone 5s 模式預覽，可能會有問題，比如border:1px的時候可能會不可見，字體會有些模糊等，但是手機端展現的時候不會出現這些問題，因為絕大多數手機目前屏幕分辨率都足夠高，而且專門針對viewport做了處理，所以這個問題可以忽略。

測試地址：點擊這里，這個網頁就是按640定寬做的，可以在多數尺寸的網頁上做適配

第二種方案

上面這個不用解釋了，絕大多數知名網站都這么做的.
很多網站為了能夠讓圖片和字體也做自適應，會使用rem來作為單位，然后再啟用javascript判定屏幕寬度，動態改變html元素的fontsize。

為了方便計算，通常會默認將html的font-size設置為100px，這樣方便計算，例如你的網頁字體是16px,只需要寫成0.16rem就行了，然后假如設計稿是按640寬度設計，切圖的時候完全按設計稿來進行單位換算，然后在js中獲取屏幕寬度，根據比例：100/x = 640/documentWidth 計算html的字體大小即可，當然要加入一個window.resize事件重新計算，以防橫豎屏切換。

重要：如果你希望字體不縮放，可以不考慮將font-size設置為rem

第二種方案有幾個弊端：

由于背景圖片無法做縮放，(background-size:cover|contain)只能針對單張圖片，而對于sprite css image無力解決，所以這里要求如果有背景圖，全部制作成單張的，然后再加上background-size:cover|contain，這里凸顯出使用css font的好處了...

頁面中的所有單位都需要用rem來計算，雖然 X/100是很簡單的計算，但是書寫的時候還是讓人厭煩。

所有的圖片必須指定寬度，不然圖片會按原始寬度進行渲染，當屏幕尺寸與設計預期尺寸不一致時，就會出錯了。

根據上面的描述，我做了兩個工具：

制作時依然采用px作為單位，通過watch插件監聽css文件的改變，然后動態轉換px2rem。

根據圖片生成auto convert css icon文件，類似grunt-sprite，但只生成對應的css，而不合成圖片,這樣對于將以往的css sprite工具生成的圖片可以低成本切換成單一圖片ICON 開發思路是這樣：

開發時區分目錄，例如src表示源碼，dest目錄標示轉換后的靜態文件，目前上規模的工程都這么做，應該沒什么成本了，然后css依然使用像素作為單位。

通過grunt或gulp插件來監聽文件改變，然后做copy,sync之類的處理，同時這里將css中的px按設定的比率轉換成rem。

不能在網頁中直接嵌入內聯style，或者需要自行轉換單位之后嵌入。

監聽腳本：
(注：這里假定開發的時候依據的寬度的640，默認字體是32像素)

// 根據屏幕寬度適配字體大小
$(window).on("resize", function () {
  var width = document.documentElement.clientWidth;
  $("html").css("font-size", (width / 640 * 32) + "px");
}).triggerHandler("resize");

測試地址：點擊這里

(因為我的工程使用的是grunt，所以寫的插件也是針對grunt的，如果你打算使用gulp，需要自行實現上面的工具了)

第三種方案

固定高度，寬度自適應

這個方案其實就是原生iphone的方案，既在不同尺寸的屏幕上顯示時，寬度會自適應，高度是固定的，字體大小也固定，譬如一個list元素的高度是44px，無論在iphone5,iphone6,iphone6+它都是44px高，但是寬度是不定的，這個其實是一個標準實現方案，既高度確定，內容寬度自適應，字體大小固定。

流行的大公司的H5網站基本都是這么處理的，淘寶在這個方案的基礎上額外做了1px的適配，因為在視網膜雙倍屏上，實際上使用2px的物理像素來渲染1px的邏輯像素，為了能夠做到精準的1px，淘寶沒有默認寫viewport而是使用js來動態生成viewport。

當然dpr不同，生成的viewport也不一樣，雙倍屏的viewport是0.5, 3倍屏的是0.33333,所有單位使用rem，js根據不同的倍屏生成一個基礎的font-size，單倍屏幕是16px，雙倍是32px，3倍是48px，以此類推。

動態生成viewport額外引出兩個問題：
1.android的很多機型不支持動態生成的viewport，僅在IPHONE上適配良好，
2.原始的css不能再使用px，而要使用rem作為單位。

第一個問題比較好解決，ua判斷好了，第二個問題需要在編寫css的時候動態轉換rem。

結合到一起：

(新增)：
由于淘寶的方案比較復雜，為了1PX的顯示做了非常復雜的處理，所以放棄了。有個折中的辦法是對1px的處理做scale縮放，不過這樣可能會在dpr為1的屏幕出現問題，或者在dpr>2的屏幕依然會變粗。
不過這個方案簡單易行，事實上微信的UI團隊用的就這個方案，我參考了他們的解決辦法，實現了一套自己的UI：使用默認的1倍縮放viewport方案，不縮放圖片和字體，放棄自適應。1px問題采用scale方案解決。圖片布局問題采用padding-top百分比寬度解決(可以自行百度)

http://exui.legend.life
https://github.com/whosesmile...

總結

第一個定寬開發的方案其實非常適合小團隊做推廣頁面，因為這樣避免了各種工具的整合，降低了開發復雜度。

第二個方案適合需要適應絕大多數尺寸瀏覽器的項目，同時如果配置好打包工具，可以很大程度降低難度，將開發和部署解耦，開發代碼比較清晰。

第三個方案適合對項目精細要求度比較高的，成本稍高。

云服務器 GPU云服務器 asp頁面自適應 js頁面高度自適應手機html自適應 asp 頁面適應手機

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85660.html

關于響應式設計的一些關鍵點

摘要：這里使用到的最多的中的屬性，即媒體查詢響應式設計實踐原則漸進增強漸進增強英語是網頁設計的一種策略，強調可訪問性，語義標記，外部樣式表和腳本技術。 1、響應式設計關鍵點在于：媒體查詢、流動網格、彈性圖片，而不是flex布局或者是自適應布局響應式和自適應的最直觀的區別是：自適應是為了解決如何才能在不同大小的設備上呈現同樣的網頁，直觀地來看就是盒子會根據屏幕分辨率的大小進行伸縮變換。所以...

golden_hamster 2019-08-29 14:17 評論0 收藏0
FineReport中如何安裝移動端H5插件

摘要：移動端報表使用方法安裝好插件后，在瀏覽器中調用時，需要在報表路徑后面加上參數。另外移動端的插件，圖表是只支持顯示新圖表。 HTML5報表插件安裝及使用編輯插件安裝插件網址以及設計器插件安裝方法和服務器安裝插件的方法可以官網上面搜索，這里就不做詳細介紹了。移動端HTML5報表使用方法安裝好插件后，在瀏覽器中調用時，需要在報表路徑后面加上參數op=h5。但是PC端不完全支持H5效果。移...

bovenson 2019-08-20 15:52 評論0 收藏0
CSS9:動態 REM-手機專用的自適應方案

摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設計師的設計稿寬度需要統一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。 CSS9:動態 REM-手機專用的自適應方案動態 REM是手機專用,是如何適配所有手機的方案,不是響應式方案,例如 : taobao.com 是專門的PC端m.taobao.com 是...

ityouknow 2019-08-02 10:52 評論0 收藏0
CSS9:動態 REM-手機專用的自適應方案

摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設計師的設計稿寬度需要統一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。 CSS9:動態 REM-手機專用的自適應方案動態 REM是手機專用,是如何適配所有手機的方案,不是響應式方案,例如 : taobao.com 是專門的PC端m.taobao.com 是...

joyqi 2019-08-30 15:54 評論0 收藏0