摘要:方案的簡(jiǎn)單介紹基于前提頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值,然后頁面的所有元素布局均相對(duì)于該值采用單位設(shè)定。
1、困擾多時(shí)的問題
在這之前做web app開發(fā)的的時(shí)候,在自適應(yīng)方面一般都是寬度通過百分比,高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫死,我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn),所以高度一般取個(gè)大概值,各種圖標(biāo)的寬高也是取平衡值寫死,然后部分樣式通過媒體查詢來設(shè)置,例如背景圖的多倍圖、基礎(chǔ)字體大小、圖標(biāo)寬高。
這樣做的弊端很明顯:
做出來的頁面在各種手機(jī)端看起來的物理大小(高度)是一樣的,所以在大屏手機(jī)會(huì)覺得頁面稍小,小屏手機(jī)頁面稍大
如果要使高度能更好的適應(yīng)各種手機(jī)屏幕,需要寫太多的媒體查詢樣式,效率低下
全屏背景圖片跟頁面元素需要耦合時(shí),元素位置的確定尤為困難(可能需要通過百分比去確定元素的橫向位置,但始終會(huì)有誤差)
...
最近在微博上看到流云諸葛總結(jié)的一篇文章《從網(wǎng)易與淘寶的font-size思考前端設(shè)計(jì)稿與工作流》,其中介紹到的幾種web app適配方案,我們現(xiàn)在的做法恰好是跟拉勾網(wǎng)類似的簡(jiǎn)單方案,當(dāng)然就會(huì)有上面我提到的一些問題,最后經(jīng)過預(yù)研和demo測(cè)試,我們采取了網(wǎng)易跟淘寶的方案,其實(shí)這兩者的方案是大同小異,都是基于rem的適配方案。
2、解決問題的方案網(wǎng)易跟淘寶的方案介紹在上面流云諸葛的文章中已經(jīng)寫的很清楚了,建議可以先看看那篇文章再閱讀下面我所說的,可能會(huì)更加清晰。
(1)方案的簡(jiǎn)單介紹: 基于rem前提:頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。
給html根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)font-size值,然后頁面的所有元素布局均相對(duì)于該font-size值采用rem單位設(shè)定。那么基礎(chǔ)的font-size值該如何取呢?
假如通過媒體查詢?cè)O(shè)置font-size,只能解決一部分的情況,而且并不能完成適配,因?yàn)槭謾C(jī)屏幕寬度類型實(shí)在太多了,所以font-size的取值要通過js計(jì)算,取當(dāng)前viewport的deviceWidth與設(shè)計(jì)稿的寬 的 比例值,例如:我們的設(shè)計(jì)稿尺寸都是640px的,iphone5的deviceWidth是320px,那么計(jì)算出來的font-size值就是 320 / 640 = 0.5,因?yàn)榈贸龅膄ont-size太小,不方便計(jì)算,且有的瀏覽器可能不兼容太小字號(hào),所以將font-size放大100倍,所以最終計(jì)算出來的font-size為 320 / 640 * 100 = 50(px); 當(dāng)然,這個(gè)值是根據(jù)設(shè)計(jì)稿來計(jì)算的,所以根據(jù)計(jì)算規(guī)則,下面列出幾種常見設(shè)計(jì)稿相應(yīng)的font-size值:
deviceWidth = 320,font-size = 320 / 6.4 = 50px
deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500,font-size = 500 / 6.4 = 78.125px
可在script標(biāo)簽加上如下代碼
(function () { document.addEventListener("DOMContentLoaded", function () { var html = document.documentElement; var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 6.4 + "px"; // 等價(jià)于html.style.fontSize = windowWidth / 640 * 100 + "px"; }, false); })(); // 這個(gè)6.4就是根據(jù)設(shè)計(jì)稿的橫向?qū)挾葋泶_定的,假如你的設(shè)計(jì)稿是750 // 那么 html.style.fontSize = windowWidth / 7.5 + "px";
至此,font-size的基礎(chǔ)值就確定好了,而且知道該font-size值是手機(jī)deviceWidth跟設(shè)計(jì)稿的比例值 的 100倍(重要)
(2)那么頁面元素該如何設(shè)置寬高、邊距...例如:一個(gè)設(shè)計(jì)稿寬高為140px的圖標(biāo),左邊距為50px,那么它的css應(yīng)該這樣寫
.icon { width: 1.4rem; /* 像素?fù)Q算rem:140px / 100 = 1.4rem */ height: 1.4rem; margin: 0 0 0 .5rem; }
因?yàn)閔tml的font-size是放大了100倍,所以計(jì)算rem時(shí),要用設(shè)計(jì)稿的實(shí)際像素除以100,140px / 100 = 1.4rem; 最后實(shí)際的像素大小就會(huì)由deviceWidth跟設(shè)計(jì)稿的橫向?qū)?的 比例 自動(dòng)計(jì)算出來。
如圖iPhone5下面的效果:
iphone6的效果:
可以看出來:html的font-size動(dòng)態(tài)根據(jù)deviceWidth改變,圖標(biāo)的寬高、邊距等也根據(jù)font-size動(dòng)態(tài)按比例變化,大功告成了?不對(duì),相信機(jī)智的你已經(jīng)看到貌似在iPhone6的下有的圖標(biāo)背景錯(cuò)位了。。是的,這暴露出了一個(gè)背景使用雪碧圖的一個(gè)弊端(由于font-size小數(shù)點(diǎn)太多,計(jì)算出實(shí)際背景圖大小background-size跟背景圖位置background-position時(shí)瀏覽器精度不夠可能就會(huì)出現(xiàn)位置的偏差(我猜的),這個(gè)后面還會(huì)詳細(xì)講解決方案)
到這里,設(shè)置寬高、邊距等都OK了,接下來...
(3)其他元素的字體大小該如何設(shè)置?在流云諸葛的文章中講到,網(wǎng)易跟淘寶的做法都是使用額外的媒體查詢?cè)O(shè)置幾種字體大小,例如:
@media screen and (max-width: 320px) { body{font-size: 14px;} } @media screen and (min-width: 321px) and (max-width: 413px) { body{font-size: 16px;} } @media screen and (min-width: 414px) and (max-width: 639px) { body{font-size: 17px;} } @media screen and (min-width: 640px) { body{font-size: 18px;} }
可為什么不用rem呢?后來去查了一番資料,發(fā)現(xiàn)有一種叫做點(diǎn)陣字體的存在(什么是點(diǎn)陣字體),也叫作位圖字體,位圖我們都知道,跟矢量圖是有區(qū)別的,就是放大會(huì)模糊,所以點(diǎn)陣字體也是放大會(huì)模糊的,如果根據(jù)rem設(shè)置字體大小,字體會(huì)自由縮放,可能就會(huì)導(dǎo)致點(diǎn)陣字體模糊,所以需要設(shè)定使用幾種固定大小的字體。不過,在正常情況下,系統(tǒng)自帶的字體都是矢量字體,所以使用rem為單位是沒有問題的,除非你的網(wǎng)頁需要用到特殊的點(diǎn)陣字體。
(4)關(guān)于背景圖片的錯(cuò)位問題總結(jié):如果網(wǎng)頁沒有用到特殊的點(diǎn)陣字體,字體單位使用rem,如果用到了點(diǎn)陣字體,字體需要通過媒體查詢?cè)O(shè)置幾種固定大小的字體
上面已經(jīng)發(fā)現(xiàn)了,通過換算rem設(shè)置background-size跟background-position的時(shí)候,在一些手機(jī)型號(hào)下會(huì)出現(xiàn)背景圖錯(cuò)位的情況,可是如果不用rem設(shè)置的話,又不能達(dá)到適配的目的。(background-size、background-position的rem換算方法跟前面講的寬高設(shè)定一樣,都是設(shè)計(jì)稿尺寸(這時(shí)應(yīng)該是雪碧圖的原始尺寸)除以100倍)
最后經(jīng)過嘗試,得出了幾種解決方案:
1、如圖(推薦方案):
圖標(biāo)的樣式
.icon { width: 1.4rem; height: 1.4rem; background-image: url(sprite.png); background-repeat: no-repeat; background-size: 1.4rem; } .icon3 { background-position: 0 -2.8rem; }
解決方法,如圖:
代碼如下:
.icon-fix { background: none; position: relative; overflow: hidden; } .icon-fix:after { content: ""; display: block; width: 10000%; height: 10000%; position: absolute; left: 0; top: 0; background-image: url(sprite.png); background-repeat: no-repeat; background-size: 140rem; -webkit-transform-origin: 0 0; -webkit-transform: scale(.01); transform-origin: 0 0; transform: scale(.01); } .icon3:after { background-position: 0 -280rem; }
所有相關(guān)代碼 傳送門
2、不使用雪碧圖,使用單個(gè)背景圖,這個(gè)時(shí)候就不存在background-position的需要,只需設(shè)定background-size: contain;即可,這樣做的弊端就在于無法使用雪碧圖,圖片請(qǐng)求增多,適用于頁面圖標(biāo)較少的情況
3、使用嵌套img標(biāo)簽,通過絕對(duì)定位模擬background-position,具體請(qǐng)看 responsive-sprites,這種做法需要更多的標(biāo)簽,且img圖片只能放圖標(biāo)尺寸大小一樣的雪碧圖,而且不能通過媒體查詢使用多倍圖
以上3中解決方案第一種最優(yōu),當(dāng)然有些特殊情況可能需要按需選擇!
最后發(fā)現(xiàn)一篇研究rem產(chǎn)生小數(shù)點(diǎn)像素的問題的文章,感興趣的可戳 《rem 產(chǎn)生的小數(shù)像素問題》
3、寫在最后關(guān)于web app的探索之路還很長(zhǎng),以上純粹個(gè)人在學(xué)習(xí)過程的一些探索和研究,肯定會(huì)有不足和錯(cuò)漏的地方,只有在不斷的實(shí)踐中去修正。如果大家發(fā)現(xiàn)其中有錯(cuò)或不好的地方,歡迎提出共同研究,也歡迎大家有更好的方案可以跟我分享研究!
感謝你的閱讀!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/111192.html
摘要:方案的簡(jiǎn)單介紹基于前提頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值,然后頁面的所有元素布局均相對(duì)于該值采用單位設(shè)定。 1、困擾多時(shí)的問題 在這之前做web app開發(fā)的的時(shí)候,在自適應(yīng)方面一般都是寬度通過百分比,高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫死,我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn),所以高度一般取個(gè)大概值,各種圖標(biāo)的...
摘要:文字換行強(qiáng)制不換行自動(dòng)換行強(qiáng)制英文單詞斷行兩端對(duì)齊去掉瀏覽器中文本框或的黃色焦點(diǎn)框去掉記住密碼后自動(dòng)填充表單的黃色背景最小高度兼容代碼鼠標(biāo)不允許點(diǎn)擊平臺(tái)字體優(yōu)化微軟雅黑文字過多后顯示省略號(hào) 1. css 2.x 文字換行 /*強(qiáng)制不換行*/ white-space:nowrap; /*自動(dòng)換行*/ word-wrap: break-word; word-break: normal; /...
摘要:文字換行強(qiáng)制不換行自動(dòng)換行強(qiáng)制英文單詞斷行兩端對(duì)齊去掉瀏覽器中文本框或的黃色焦點(diǎn)框去掉記住密碼后自動(dòng)填充表單的黃色背景最小高度兼容代碼鼠標(biāo)不允許點(diǎn)擊平臺(tái)字體優(yōu)化微軟雅黑文字過多后顯示省略號(hào) 1. css 2.x 文字換行 /*強(qiáng)制不換行*/ white-space:nowrap; /*自動(dòng)換行*/ word-wrap: break-word; word-break: normal; /...
摘要:文字換行強(qiáng)制不換行自動(dòng)換行強(qiáng)制英文單詞斷行兩端對(duì)齊去掉瀏覽器中文本框或的黃色焦點(diǎn)框去掉記住密碼后自動(dòng)填充表單的黃色背景最小高度兼容代碼鼠標(biāo)不允許點(diǎn)擊平臺(tái)字體優(yōu)化微軟雅黑文字過多后顯示省略號(hào) 1. css 2.x 文字換行 /*強(qiáng)制不換行*/ white-space:nowrap; /*自動(dòng)換行*/ word-wrap: break-word; word-break: normal; /...
閱讀 658·2021-11-23 09:51
閱讀 3258·2021-10-11 10:58
閱讀 15407·2021-09-29 09:47
閱讀 3527·2021-09-01 11:42
閱讀 1281·2019-08-29 16:43
閱讀 1831·2019-08-29 15:37
閱讀 2089·2019-08-29 12:56
閱讀 1718·2019-08-28 18:21