随着移动互联网的日益普遍,现在移动版本的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基本事件
要点八、弹性滚动
持续更新中......