移動端佈局的方法(1)

幾種移動端佈局方法

 響應式佈局

 

　　1 利用@meida判斷各個size 　

媒體類型

@media (max-width:768px){

    //css 在瀏覽器的寬度低於768時有效

}

@media (max-width:1000px){

    div{background:blue;} // 當瀏覽器寬度低於1000px時

}

@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%;}

}

 

按需‘加載’css

 

@media還能夠用在link標籤上。

 

<link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>

 

當瀏覽器寬度低於500px時，1.css的樣式纔會有效果。但這不表明大於500px時，就沒加載了1.css。使用了@media屬性後，只會讓你當條件符合了，才讓對應的css文件有效果。並且用這種方式有一個好處，就是不用在css裏寫@media。

 

日常響應式網站的開發

平時響應式網站的開發，我都會先對比PC和MOBILE的設計稿，看看有什麼區別，而後才進行編寫css。一般都是使用flex。寬度儘可能用百分比，間距、高度、字體大小使用 em，就能夠很方便的進行大小的控制。

 

　　2 rem

REM

 

REM這個單位，會根據html的font-size大小進行轉換。

 

html{font-size:100px;}

p{padding-top:.5rem;}

 

轉換後p的padding-top就是50px了。只要咱們進行適當的計算，當前屏幕的寬度，html的font-size是多少px就OK了。

 

如何計算當前html的font-size值

 

好比，咱們拿到的設計稿是750px，那就設置成當屏幕寬度是750的時候，html的font-size就是100px（固然這個100px你能夠隨意設置的，我設置成100px只是方便我計算），而後就根據當前屏幕的寬度 / 750 * 100，就獲得了當前屏幕寬度的font-size值。

 

//當前屏幕寬度 / 750 = 當前屏幕寬度的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);

 

上面這段代碼，是直接根據屏幕寬度進行計算font-size的。

而淘寶移動端REM方案，還根據你的dpr去計算，並且會進行總體的縮放, 這種方案，比上面的代碼會好不少。淘寶的方案，解決了另外一個問題：邊框1px的問題。

連接具體的效果：

第一種方案（http://www.rni-l.com/mobile/index2.html）

第二種方案（http://www.rni-l.com/mobile/index.html）

 

淘寶移動端REM

 

這個很簡單，只須要加載js就行了

 

<script src="http://g.tbcdn.cn/mtb/lib-flexible/%7B%7Bversion%7D%7D/??flexible_css.js,flexible.js"/>

 

而後在css中，將px轉爲rem就行了。我是用scss的，因此寫個函數就行了。

 

@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的設計稿是40px，而後s(40)就OK了。

 3 最後是設置viewport

設置viewport中的width

這種方案，就是定死viewport中的width大小。

好比設計稿是750的，而後就在代碼上寫：

 

<meta name="viewport" content="width=750"/>

 

咱們用一樣的頁面，看看效果是怎麼樣

 

連接：第三種方案（http://www.rni-l.com/mobile/index3.html）

 

效果和第二種是同樣的，在手機上看也是。

 

.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媒體查詢是沒法使用的，由於已經將寬度定死了。而REM方案卻可使用媒體查詢的。由於移動端有不少奇怪的大小，並且在不一樣的瀏覽器或者微信上，高度都是不一樣的，因此可能會形成間距有很大的問題。

 

window.screen.width

 

用js，能夠獲取當前設備的寬度。

 

對比三種方式

 

響應式的優缺點

 

優勢：兼容性好，@media在ie9以上是支持的，PC和MOBILE是同一套代碼的，不用分開。

 

缺點：要寫得css相對另外兩個多不少，並且各個斷點都要作好。css樣式會稍微大點，更麻煩。

 

REM優缺點

 

優勢：能維持能總體的佈局效果，移動端兼容性好，不用寫多個css代碼，並且還能夠利用@media進行優化。

 

缺點：開頭要引入一段js代碼，單位都要改爲rem(font-size能夠用px)，計算rem比較麻煩(能夠引用預處理器，可是增長了編譯過程，相對麻煩了點)。pc和mobile要分開。

 

設置viewport中的width

 

優勢：和REM相同，並且不用寫rem，直接使用px，更加快捷。

 

缺點：效果可能沒rem的好，圖片可能會相對模糊，並且沒法使用@media進行斷點，不一樣size的手機上顯示，高度間距可能會相差很大。

 

總結

 

仍是看項目需求，再決定使用哪一種方案，若是就手機站的話，我使用REM比較多。若是對距離比較精確的話，大量css3動畫的，就使用第三種。