移动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的适配

巴特西

移动Web之响应式布局的探讨

响应式布局的探讨

响应式布局的两种方式

知识点：

百分比布局

基于rem布局的方式来实现响应式

首先看一下典型例子淘宝触屏版

rem响应式

平均分布对齐方式在充值界面的应用

最终的成果 DEMO

平均分布对齐 DEMO

扩展阅读

最新文章

热门文章

巴特西

移动Web之响应式布局的探讨

响应式布局的探讨

响应式布局的两种方式

知识点：

百分比布局

基于rem布局的方式来实现响应式

首先看一下典型例子 淘宝触屏版

rem响应式

平均分布对齐方式在充值界面的应用

最终的成果 DEMO

平均分布对齐 DEMO

扩展阅读

最新文章

热门文章

首先看一下典型例子淘宝触屏版