移动Web之响应式布局的探讨
响应式布局的探讨
响应式布局的两种方式
- 基于百分比的布局 例：Bootstrap
- 基于rem的布局 例：淘宝触屏版
这两种布局都需要依赖于CSS3的media query来设置布局断点（或者通过js监听窗口大小来调整）
从而可以根据屏幕大小来调整 百分比布局中盒子的宽度 或 rem布局中HTML的字体大小
知识点：
实现rem布局的方式和效果
实现平均分布对齐的方式（flex与justify）
平均分布对齐的应用
百分比布局
基于百分比的布局这里就演示了，Bootstrap 已经应用很广泛，相信基本都已经熟知他的原理，如果还有不明白的可以去Bootstrap中文网去看官方文档。基本原理是通过media query来调整容器的宽度值来控制内部column的百分比和显示隐藏
基于rem布局的方式来实现响应式
首先看一下典型例子 淘宝触屏版
body中的字体大小
应用的技术要点：
- 使用rem来做响应式布局
- 使用flex来使nav导航自适应
- 使用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的适配
