CSS的長度單位適配方案.docx

CSS的長度單位適配方案前言一般而言，我們用CSS設(shè)置字體大小和元素長寬是這樣的：.name font-size: 16px; width: 100px;(由于字體大小和元素長寬的原理一樣，下面統(tǒng)一討論字體。)本來一切好好的，但到了不同的屏幕上效果差別就很大了。假設(shè)你的設(shè)計(jì)稿是按照iphone6的尺寸來標(biāo)注，那在iphone6 plus上，由于你的字體還是一樣大，所以在iphone6 plus上看起來會(huì)小一點(diǎn)。如果屏幕尺寸再大，則會(huì)再小，效果和UI設(shè)計(jì)的看起來就不太一樣了。特別是某些固定尺寸的元素，看起來就會(huì)很奇怪。原始的做法更好的設(shè)計(jì)是，在iphone6 plus上把iphone6的設(shè)計(jì)放大。比如6的屏幕寬度是375，字體大小為16，而6p的寬度為414，那字體就應(yīng)該是414/375*16=17.6px。也就是根據(jù)兩者之間的比例來放大字體。然而，屏幕并不只有6和6p，也許還要適配其他不同尺寸的屏幕。而且如果每種適配都需要重新修改字體樣式的話，工作量就太大了。當(dāng)然，最簡單的做法就是在head里面設(shè)置initial-scale，根據(jù)不同屏幕來決定縮放的值。但是，這種做法有個(gè)不好的地方，就是它本身是一個(gè)放大功能，字體和圖片被放大之后會(huì)變模糊，對(duì)于追求比較高的前端頁面來說可能難以接受。還有另一個(gè)方面，IE并不能縮放px字體的大小。如果在IE上進(jìn)行了縮放，那字體還是那么大。三種不同的單位接下來介紹三種不同的長度單位(CSS Units)。pxpx，就是pixels。翻譯為像素并不十分精確，可能翻譯為點(diǎn)更好，但是已經(jīng)有另一個(gè)單位pt(points)，所以，也只能繼續(xù)翻譯為像素了。這里的px不同于一般的像素，它的特性就是在不同的設(shè)備上代表的大小不同。在低清屏上，1px就代表1像素，而在高清屏上，比如iphone 6上則代表2個(gè)像素，而在iphone6 plus上則代表3個(gè)像素，因?yàn)?p是3倍的高清屏。所以，當(dāng)設(shè)計(jì)稿給出iphone 6的尺寸時(shí)，你必須把它除以2，寫成px，才能在移動(dòng)設(shè)備上正確地顯示尺寸。emRelative to the font-size of the element (2em means 2 times the size of the current font)意思就是，某個(gè)元素的字體大小與它的父元素的相對(duì)單位。這個(gè)很好理解，比如父元素A，擁有子元素B。假設(shè)A字體設(shè)置為1em，B設(shè)置為2em，而1em=16px，那最后A的字體是16px，B的字體是32px。而B又擁有子元素C，C設(shè)置為0.5em，則C的字體為32px*0.5=16px。這里的32px是B元素的字體大小。remRelative to font-size of the root element和em類似，不同的是，rem相對(duì)的是根元素的字體大小。假設(shè)html的字體為16px，擁有A元素，字體為2rem，那A的字體就是32px。假設(shè)A擁有B，而B為2rem，那B的字體也為32px，因?yàn)樗鄬?duì)的是html，而不是A。假設(shè)B的字體為2em，那B就是64px了。再來看看rem的兼容性，也是相當(dāng)不錯(cuò)的。rem的兼容性利弊使用px的話，基本上頁面元素的字體大小都是固定的，甚至修改起來也很麻煩。而用em就能解決適配的問題，但壞處是每個(gè)大小都是相對(duì)父元素的，一旦某個(gè)節(jié)點(diǎn)有所變動(dòng)，很容易造成其他節(jié)點(diǎn)也要變動(dòng)，而且本身不是特別直觀，單看某個(gè)節(jié)點(diǎn)是1em并不能得到它的具體大小。而rem基本是最優(yōu)方案了，既可以很好地適配，也可以直觀地修改。下面會(huì)介紹將rem方案應(yīng)用到項(xiàng)目里的方法。REM方案用px寫CSS，構(gòu)建時(shí)替換為rem并不提倡直接在代碼里寫rem，因?yàn)槟悴⒉恢滥惝?dāng)前的1rem代表多少。所以最好的方式是代碼里直接用px描述字體和大小，并在后期將其轉(zhuǎn)化為rem。適配不同屏幕的方案針對(duì)6和6p這些不同的屏幕，我們可以使用media query來定義root element的字體大小，這樣就能輕松做到根據(jù)不同屏幕展現(xiàn)同樣的視覺效果。構(gòu)建方案構(gòu)建方案很簡單，分為兩步，一個(gè)針對(duì).css文件，另一個(gè)針對(duì)html，包括html中的style標(biāo)簽以及html中的inline-style。處理普通的css文件目前比較好用的處理css文件的插件是gulp-postcss和postcss-pxtorem配合使用，比如像這樣：var postcss = require(gulp-postcss);var pxtorem = require(postcss-pxtorem);var options = rootValue: 10,propWhiteList: ,minPixelValue: 1;gulp.src(www/*.css).pipe(postcss(pxtorem(options).pipe(gulp.dest(build/);postcss-pxtorem提供了不同的參數(shù)設(shè)置來轉(zhuǎn)化css中的px。比如rootValue用來定義轉(zhuǎn)化時(shí)根元素的值，mediaQuery決定是否轉(zhuǎn)換media query中的大小，minPixelValue用來定義最小的不需轉(zhuǎn)化的px值(比如可以不轉(zhuǎn)化1px的大小)。如果想要特制某些元素的大小不被轉(zhuǎn)化，可以通過8PX這樣的大寫方式來解決，因?yàn)閜xtorem不會(huì)轉(zhuǎn)化這部分css，而瀏覽器卻能夠識(shí)別。此外還有白名單、黑名單、小數(shù)點(diǎn)位數(shù)、是否替換原來的px等參數(shù)可供設(shè)置。處理html中的css這部分比較有意思。微信提供了posthtml-px2rem的方案來解決inline-style的問題，但不處理html中的style標(biāo)簽，因?yàn)樗麄円呀?jīng)把css獨(dú)立出去解決。但是，不少框架還會(huì)在文件中使用style標(biāo)簽，如果只需要處理inline-style的話也可以用這個(gè)方案。更通用一點(diǎn)的處理方式是gulp-posthtml、posthtml-postcss、postcss-pxtorem，流程基本就是處理html中的css中的px，這里會(huì)統(tǒng)一把inline-style一起解決，所以是個(gè)不錯(cuò)的選擇。var posthtml = require(gulp-posthtml);var posthtmlcss = require(posthtml-postcss);var pxtorem = require(postcss-pxtorem);var options = ;gulp.src(www/*.html).pipe(posthtml(posthtmlcss(pxtorem(options).pipe(gulp.dest(build/);這里使用了和