移动WEB的页面布局

随着移动互联网的日益普遍，现在移动版本的web应用也应用而生，那么在做移动web页面布局的过程中，应该注意哪些要点呢？现把个人的一些学习经验总结如下：

要点一、piexl

1px = 2dp
dp dpr dpi ppi

要点二、viewport

ios的viewport为980px
布局：layout viewport
视图：visual viewport
meta标签：语法 <meta name="viewport" content="name=value, name=value">
width: 设置布局viewport的特定值（“device-width”）
initial-scale: 设置页面的初始缩放（“1”）
minimum-scale: 最少缩放
maximum-scale: 最大缩放
user-scalable: 用户能否缩放（“no”）
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

要点三、Flexbox弹性盒子布局

如何使用flexbox布局：

display: -webkit-flex: 标识使用弹性布局

flex: num 占容器的比例

日常编程中常遇到的案例:

不定宽高的水平垂直居中

传统布局==> position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);

flexbox==> justify-content: center; align-items: center; display: -webkit-flex;

flexbox的兼容性：

IOS 可以使用最新的flex布局

android4.4以下, 只能兼容旧版的flexbox布局

android4.4及以上，可以使用最新的flex布局

要点四、响应式布局

媒体查询
百分比布局
弹性图片：max-width: 100%
重新布局，显示与隐藏

要点五、移动web特别样式处理

高清图片的处理方案

在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是100*100的图片，应该使用100dp*100dp。
width: (w_value/dpr) px;
height: (h_value/dpr) px;

一像素边框

根本原因：1px使用2dp渲染
实现方案：使用元素伪类的方法，以li元素为例

 li.before {position: absolute;top: -1px;left: 0;content: '';width: 100%;height: 1px;    border-top: 1px solid #ddd;-webkit-transform: scaleY(0.5);}

相对单位rem

em: 是根据父节点的font-size为相对单位，但是在多层嵌套下，变得非常难以维护
rem: 是根据html的font-size为相对单位，和em相比，rem更能作为全局统一设置的度量单位

rem = screen.width / 20
比如：

// 默认320px
html {font-size: 32px;}// iphone6
@media (min-device-width: 375px) {html {font-size: 37.5px;}
}// iphone6 plus
@media (min-device-width: 414px) {htmlfont-size: 41.4px;}
}

不使用rem的情况: font-size

文本溢出

// 单行文本溢出
.inaline {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}// 多行文本溢出
.intwoline {display: -webkit-box !important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}

要点六、Tap基础事件
要点七、Touch基本事件
要点八、弹性滚动

持续更新中......