移动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-100%; flex:1; }

text-align:justify

/*----justify 布局*/
.itemlist ul { text-align:justify; font-size:0; letter-spacing:-4px;}
.itemlist ul:after { 
 display: inline-block; 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; 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的适配