移動Web之響應式佈局的探討

響應式佈局的探討

響應式佈局的兩種方式

• 基於百分比的佈局 例：Bootstrap
• 基於rem的佈局 例：淘寶觸屏版
  這兩種佈局都須要依賴於CSS3的media query來設置佈局斷點（或者經過js監聽窗口大小來調整）
  從而能夠根據屏幕大小來調整 百分比佈局中盒子的寬度 或 rem佈局中HTML的字體大小

知識點：

實現rem佈局的方式和效果
實現平均分佈對齊的方式（flex與justify）
平均分佈對齊的應用

百分比佈局

基於百分比的佈局這裏就演示了，Bootstrap 已經應用很普遍，相信基本都已經熟知他的原理，若是還有不明白的能夠去Bootstrap中文網去看官方文檔。基本原理是經過media query來調整容器的寬度值來控制內部column的百分比和顯示隱藏

基於rem佈局的方式來實現響應式

首先看一下典型例子 淘寶觸屏版

body中的字體大小

應用的技術要點：

1. 使用rem來作響應式佈局
2. 使用flex來使nav導航自適應
3. 使用text-align:justify來使項目列表水平平均分佈對齊

rem響應式

從圖中能夠看出 HTML的font-size是根據屏幕大小的變化而變化的，而內容的大小也是等比縮放
原理：
    `px` 固定值
    `em` 是相對於其父元素來設置字體大小
    `rem` 值相對於根HTML中字體的大小
若是頁面上的元素大小都是相對於根的大小，那麼就會隨着根元素大小變化而變化 (道理就是這麼簡單)

平均分佈對齊方式在充值界面的應用

flex

.nav_list { 
  box-sizing:border-box; overflow:hidden;
  margin:0 .1rem;border:1px solid #5e646e; border-radius:.04rem;  
  display:flex; flex-wrap:wrap;
}
.nav-item { position:relative; max-width:100%; flex:1; }

text-align:justify

/*----justify 佈局*/
.itemlist ul { text-align:justify; font-size:0; letter-spacing:-4px;}
.itemlist ul:after { 
 display: inline-block; width:100%; height:0; content:'';vertical-align: top;overflow:hidden;
}

最終的成果 DEMO

使用js來監聽窗口大小來調整根字體的值，從而控制rem的大小

var orientationChangeEv = function(){
  var winW = window.innerWidth, w, fontSize;
  //保證window內部的寬度在320-640之間，最小爲320，最大爲640
  w = (winW <= 320) ? 320 : ((winW >= 640) ? 640 : winW);
  //根據窗口的大調整字體的大小
  fontSize = 100 * (w / 320); 
  document.documentElement.style.fontSize = fontSize + 'px';
};
//綁定window的resize事件
window.addEventListener('resize',orientationChangeEv);
//初始時，執行一次
setTimeout(orientationChangeEv, 0);

平均分佈對齊 DEMO

flex能夠輕鬆的實現平均分佈對齊
text-aling：justify; 須要必定的條件：必須有換行行爲才能觸發平均分佈對齊
在項目列表有多行顯示時，最後一行沒法換行會形成不能平均分佈
解決的方式是 父容器使用僞類:after的方式添加一個內聯元素，寬度100%，來觸發換行
ul:after { display: inline-block; width:100%; height:0; content:'';vertical-align: top;overflow:hidden;}

圖例：

仿淘寶充值響應式界面DEMO

See the Pen jEXmpj by LT (@togglelt) on CodePen.

擴展閱讀

大漠 Text-align:Justify和RWD
張鑫旭 display:inline-block/text-align:justify下列表的兩端對齊佈局
移動端H5頁面之iphone6的適配