總結(jié)個(gè)人使用過的移動(dòng)端布局方法
這篇文章，主要是總結(jié)一下，我在移動(dòng)端布局用過的方法。有三種，一種是響應(yīng)式布局，利用@meida判斷各個(gè)size;第二種是REM;最后是設(shè)置viewport中的width。
響應(yīng)式布局
這種感覺是最好理解了，利用@media進(jìn)行斷點(diǎn)，在每個(gè)斷點(diǎn)中編寫css。
- @media (max-width:768px){
- //css
- }
上面這段代碼，在瀏覽器的寬度低于768時(shí)有效。同理，如果把max換成min，就會(huì)變成高于768時(shí)有效?？梢栽O(shè)置寬度，也可以設(shè)置高度，也可以同時(shí)設(shè)置多個(gè)值。
在MDN,@media上，發(fā)現(xiàn)很多值都可以做判斷的。寬，高，寬高比，顏色(這個(gè)是指定輸出設(shè)備每個(gè)像素單位的比特值)，是否橫屏或豎屏，還有很多，可以去MDN看看。
媒體類型
@meida還可以根據(jù)媒體類型進(jìn)行斷點(diǎn)。
- all，所有設(shè)備
- print，打印
- screen，彩色的電腦屏幕
- speech，不知道什么來的。
關(guān)鍵字
- @media (max-width:1000px){
- div{background:blue;}
- }
- @media (min-width:1000px) and (max-width:1150px){
- div{background: yellow;}
- }
- @media only screen and (max-width:1150px){
- div{border:solid 1px;}
- }
- @media not print and (max-width:1150px){
- div{border-radius:50%;}
- }
- and，就是‘和’的意思，前后兩個(gè)條件都達(dá)到時(shí)
- only，唯一
- not，除了這個(gè)之外
上面4個(gè)@media，分別的效果是：
- 當(dāng)瀏覽器寬度低于1000px時(shí)
- 當(dāng)瀏覽器寬度大于1000px 和 小于1150px時(shí)
- 當(dāng)在屏幕上顯示 和 寬度小于1150px時(shí)
- 除了在打印上顯示外 和 寬度小于1150px時(shí)
按需‘加載’css
@media還可以用在link標(biāo)簽上。
- <link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>
當(dāng)瀏覽器寬度低于500px時(shí)，1.css的樣式才會(huì)有效果。但這不代表大于500px時(shí)，就沒加載了1.css。使用了@media屬性后，只會(huì)讓你當(dāng)條件符合了，才讓對(duì)應(yīng)的css文件有效果。而且用這種方式有一個(gè)好處，就是不用在css里寫@media。
平常響應(yīng)式網(wǎng)站的開發(fā)
平時(shí)響應(yīng)式網(wǎng)站的開發(fā)，我都會(huì)先對(duì)比PC和MOBILE的設(shè)計(jì)稿，看看有什么區(qū)別，然后才進(jìn)行編寫css。通常都是使用flex。寬度盡量用百分比，間距、高度、字體大小使用 em，就可以很方便的進(jìn)行大小的控制。
REM
REM這個(gè)單位，會(huì)根據(jù)html的font-size大小進(jìn)行轉(zhuǎn)換。
- html{font-size:100px;}
- p{padding-top:.5rem;}
轉(zhuǎn)換后p的padding-top就是50px了。只要我們進(jìn)行適當(dāng)?shù)挠?jì)算，當(dāng)前屏幕的寬度，html的font-size是多少px就OK了。
如何計(jì)算當(dāng)前html的font-size值
比如，我們拿到的設(shè)計(jì)稿是750px，那就設(shè)置成當(dāng)屏幕寬度是750的時(shí)候，html的font-size就是100px(當(dāng)然這個(gè)100px你可以隨意設(shè)置的，我設(shè)置成100px只是方便我計(jì)算)，然后就根據(jù)當(dāng)前屏幕的寬度 / 750 * 100，就得到了當(dāng)前屏幕寬度的font-size值。
- //當(dāng)前屏幕寬度 / 750 = 當(dāng)前屏幕寬度的font-size / 100
- //代碼如下
- (function (doc, win) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (!clientWidth) return;
- docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
- };
- if (!doc.addEventListener) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false);
- })(document, window);
上面這段代碼，是直接根據(jù)屏幕寬度進(jìn)行計(jì)算font-size的。而淘寶移動(dòng)端REM方案，還根據(jù)你的dpr去計(jì)算，而且會(huì)進(jìn)行整體的縮放。淘寶的這種方案，比上面的代碼會(huì)好很多。
大家注意邊框的大小。第二張圖的邊框是比第一張圖的小的，兩個(gè)都是border:solid 1px。其他的邊距都是一樣。淘寶的方案，解決了另一個(gè)問題：邊框1px的問題。
大家可以打開以下鏈接，看看具體的效果：
第一種方案(http://www.rni-l.com/mobile/index2.html)
第二種方案(http://www.rni-l.com/mobile/index.html)
淘寶移動(dòng)端REM
這個(gè)很簡單，只需要加載js就好了
- <script src="http://g.tbcdn.cn/mtb/lib-flexible/%7B%7Bversion%7D%7D/??flexible_css.js,flexible.js"/>
然后在css中，將px轉(zhuǎn)為rem就好了。我是用scss的，所以寫個(gè)函數(shù)就好了。
- @function s($px) {
- <a href="http://www.jobbole.com/members/wx1409399284">@return</a> ($px / 75) * 1rem;
- }
- p{
- font-size:s(40);padding-left: s(52);
- }
比如p的font-size在750的設(shè)計(jì)稿是40px，然后s(40)就OK了。
設(shè)置viewport中的width
這種方案，就是定死viewport中的width大小。
比如設(shè)計(jì)稿是750的，然后就在代碼上寫：
- <meta name="viewport" content="width=750"/>
我們用同樣的頁面，看看效果是怎么樣
鏈接：第三種方案(http://www.rni-l.com/mobile/index3.html)
效果和第二種是一樣的，在手機(jī)上看也是。
- .top{
- display: flex;align-items:center;padding:50px 0 113.5px;justify-content:space-between;width:100%;
- p{
- font-size:40px;padding-left:52px;
- }
- img{
- width:71.5px;height: 71.5px;display: block;margin-right: 63.5px;
- }
- }
而代碼是直接使用px的，定死的。
感覺從效果上來看，是很完美的，但是為什么不是這種方法最流行?
- @media screen and (max-width:360px){
- .box{color:red;}
- }
- @media screen and (max-width:520px){
- .box{color:black;}
- }
- @media screen and (max-width:750px){
- .box{color:yellow;}
- }
我在iphone7，小米5s，谷歌瀏覽器模擬的iphone6plus上，字體顏色都是黃色的。所以@media媒體查詢是無法使用的，因?yàn)橐呀?jīng)將寬度定死了。而REM方案卻可以使用媒體查詢的。因?yàn)橐苿?dòng)端有很多奇怪的大小，而且在不同的瀏覽器或者微信上，高度都是不同的，所以可能會(huì)造成間距有很大的問題。
- window.screen.width
用js，可以獲取當(dāng)前設(shè)備的寬度。
對(duì)比三種方式
響應(yīng)式的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：兼容性好，@media在ie9以上是支持的，PC和MOBILE是同一套代碼的，不用分開。
缺點(diǎn)：要寫得css相對(duì)另外兩個(gè)多很多，而且各個(gè)斷點(diǎn)都要做好。css樣式會(huì)稍微大點(diǎn)，更麻煩。
REM優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：能維持能整體的布局效果，移動(dòng)端兼容性好，不用寫多個(gè)css代碼，而且還可以利用@media進(jìn)行優(yōu)化。
缺點(diǎn)：開頭要引入一段js代碼，單位都要改成rem(font-size可以用px)，計(jì)算rem比較麻煩(可以引用預(yù)處理器，但是增加了編譯過程，相對(duì)麻煩了點(diǎn))。pc和mobile要分開。
設(shè)置viewport中的width
優(yōu)點(diǎn)：和REM相同，而且不用寫rem，直接使用px，更加快捷。
缺點(diǎn)：效果可能沒rem的好，圖片可能會(huì)相對(duì)模糊，而且無法使用@media進(jìn)行斷點(diǎn)，不同size的手機(jī)上顯示，高度間距可能會(huì)相差很大。
總結(jié)
還是看項(xiàng)目需求，再?zèng)Q定使用哪種方案，如果就手機(jī)站的話，我使用REM比較多。如果對(duì)距離比較精確的話，大量css3動(dòng)畫的，就使用第三種。
