Vue.js+Koa2移動電商實戰3

標籤：mouseover   css   複雜   布局   roi   dom   大型   width   body   

移動端螢幕適配基礎

　　製作webapp時一個很關鍵的問題就是適配各種機型不同螢幕的大小，讓每種機型上的布局看起來都盡量一樣，這讓很多小夥伴很是頭疼。在這裡我介紹一下我平時工作中常用的適配方案，當然適配方案有很多種，所以你有更好的方法，也可以使用或者大家一起交流。

　常見移動web布局適配方法

• 固定高度，寬度百分比：這種方法只適合簡單要求不高的webApp，幾乎達不到大型項目的要求，屬於過時的方法。
• Media Query（媒體查詢）：現在比較主流的適配方案，比如我們常用的樣式架構Bootstrap就是靠這個起家的，它能完成大部分項目需求，但是編寫過於複雜。
• flex布局：主流的布局方式，不僅適用於移動Web，網頁上也表現良好，這也是現在工作中用的最多的布局方式，那我們的項目盡量採用flex+rem的方式進行布局和完成移動端的適配。

　rem單位介紹

　　rem（font size of the root element）是相對長度單位。相對於根項目（即html元素）font-size計算值的倍數。

• 適配原理：將px替換成rem，動態修改html的font-size適配。它可以很好的根據根項目的字型大小來進行變化，從而達到各種螢幕基本一直的效果體驗。

　　現在我們作一個實驗，你可以建立一個網頁，並寫入如下代碼：

<div class="test">    <p class="hello">Hello jspang</p></div> 

　　然後給html一個基本的樣式:

.test{    width:320px;    height:160px;    background-color: bisque;    text-align: text；}.hello{    color:red;}

　　上邊我們使用了還是傳統的使用px作為單位，我們在移動端偵錯模式iphone5環境查看一下。會發現div的寬度是正好的，我們再查看一下字型，發現大小是16px。

我們現在可以把CSS中的px單位換成rem單位來進行測試。因為html根項目的字型大小是16px，那麼換成rem單位，直接除以16就好。

 

.test{    width:20rem;    height:10rem;    background-color: bisque;    text-align: text；}.hello{    color:red;    font-size:1rem;} 

　　頁面並沒有什麼變化，也就是說我們掌握了換算關係。為了更好的說明這點，我們可以試著給html根樣式加入字型大小，比如換成font-size:32px;。這時頁面和字型都擴大了一倍。但是我們現在還是不能實現適配，因為我們根項目的字型是固定的。

　JS控制適配螢幕

　　明白了REM的原理後，我們就可以使用這個特點來進行適應布局了，這也是現在比較主流的移動端web適配方案。當然你有更好的方案，也可以在文章下方進行留言。
三行JS程式碼完成適配：

 

//得到手機螢幕的寬度let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;//得到html的Dom元素let htmlDom = document.getElementsByTagName(‘html‘)[0];//設定根項目字型大小htmlDom.style.fontSize= htmlWidth/20 + ‘px‘; 

 

Vue.js+Koa2移動電商實戰3