流式佈局&固定寬度&響應式&rem

咱們如今在切頁面佈局的使用經常使用的單位是px，這是一個絕對單位，web app的屏幕適配有不少中作法，例如：流式佈局、限死寬度，還有就是經過響應式來作，可是這些方案都不是最佳的解決方法。

1、流式佈局：

例如流式佈局的解決方案有很多弊端，它雖然可讓各類屏幕都適配，可是顯示的效果極其的很差，由於只有幾個尺寸的手機可以完美的顯示出視覺設計師和交互最想要的效果。

他們在頁面佈局的時候都是經過百分比來定義寬度，可是高度大都是用px來固定住，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度仍是和原來同樣，實際顯示很是的不協調，這就是流式佈局的最致命的缺點，每每只有幾個尺寸的手機下看到的效果是使人滿意的，其實不少視覺設計師應該沒法接受這種效果，由於他們的設計圖在大屏幕手機下看到的效果至關因而被橫向拉長來同樣。

 

二、固定寬度作法：

固定頁面寬度的作法，早期有些網站把頁面設置成320的寬度，超出部分留白，這樣作視覺，前端都挺開心，視覺在也不用被流式佈局限制本身的設計靈感了，前端也不用在搞坑爹的流式佈局。可是這種解決方案也是存在一些問題，例如在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操做的按鈕也很小。

 

3、響應式作法：

響應式這種方式在國內不多有大型企業的複雜性的網站在移動端用這種方法去作，主要緣由是工做大，維護性難，因此通常都是中小型的門戶或者博客類站點會採用響應式的方法從web page到web app直接一步到位，由於這樣反而能夠節約成本，不用再專門爲本身的網站作一個web app的版本。

 

四、設置viewport進行縮放：

天貓的web app的首頁就是採用這種方式去作的，以320寬度爲基準，進行縮放，最大縮放爲320*1.3 = 416，基本縮放到416都就能夠兼容iphone6 plus的屏幕了，這個方法簡單粗暴，又高效。

 

五、rem能等比例適配全部屏幕:

rem是經過根元素進行適配的，網頁中的根元素指的是html咱們經過設置html的字體大小就能夠控制rem的大小。

Html  { font-size:20px;}

.btn {width: 6rem; height: 3rem;line-height: 3rem; font-size: 1.2rem;display: inline-block;ackground: #06c; color: #fff; border-radius: .5rem; text-decoration: none; text-align: center; }

只需改變html中font-size的值，全部元素的寬高、字體大小、間距都會發生改變。

咱們能夠看到無論在任何分辨率下，頁面的排版都是按照等比例進行切換，而且佈局沒有亂。咱們能夠看到無論在任何分辨率下，頁面的排版都是按照等比例進行切換，而且佈局沒有亂。

我只是經過一段js根據瀏覽器當前的分辨率改變font-size的值，就簡單的實現了上面的效果，頁面的全部元素都不須要進行任何改變。

 

6、怎麼計算出不一樣分辨率下html的font-size的值？

首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給個人前提下，（固然這個尺寸確定不必定是640，能夠是320，或者480，又或是375）來看一組表格。

 

上面的表格藍色一列是Demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不一樣寬度下font-site的值，你們看錶格上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，因此384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不一樣設備的寬度計算方式以此類推。

固然也能夠用媒體查詢進行設置html中的font-size的值：

html {

    font-size : 20px;

}

@media only screen and (min-width: 401px){

    html {

        font-size: 25px !important;

    }

}

@media only screen and (min-width: 428px){

    html {

        font-size: 26.75px !important;

    }

}

@media only screen and (min-width: 481px){

    html {

        font-size: 30px !important; 

    }

}

@media only screen and (min-width: 569px){

    html {

        font-size: 35px !important; 

    }

}

@media only screen and (min-width: 641px){

    html {

        font-size: 40px !important; 

    }

}

上面的作的設置固然是不能全部設備全適配，可是用JS是能夠實現全適配。具體用哪一個就要根據本身的實際工做場景去定了。