功能决定成度,样式决定美感度,在移动H5页面布局上规范必然时不可少。
在H5页面 UI设计图的基础,如何根据设计图片写出比例相同, 在不同移动设备上页面上的样式依然保持一致。响应式页面,rem布局的使用方法。
1、设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
2、重点在于设置页面根元素的字体大小,rem单位是根据页面根元素进去相对比例的计算。注意750 为设计图片的宽度!由于手机在横竖屏方向,document.documentElement.clientWidth 会不一样,在实例代码中进行有效处理。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 +‘px’;
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, resize, false);
function resize(fals) {
//设置标准屏幕可见宽度的(Iphone6+)
var k = 375;
if(window.orientation == 0 || window.orientation == 180) {
//竖屏
} else {
//横屏
k = 320;
}
if(document.documentElement.clientWidth <= k) {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 +'px';
}else {
//这里如果屏幕可见宽度大于 标准屏幕宽度,设置标准函数宽度为375px OR 320px.
document.documentElement.style.fontSize = k / 750 * 100 +'px';
}
}
resize(true);
真正实现的处理逻辑体现第二步骤,可直接应用于项目中。然后在设置字体大小、图片高度宽度的基础上使用rem 单位实现基本的H5页面样式响应。
字体根据H5设计图提供的字体大小 除以 100 得到rem 单位的换算。20px – 0.2rem 。100px – 1rem。
原附件Demo,使用上希望能帮助到。
http://download.csdn.net/download/china_guanq/9976833
QQ群:595377655。问题总是能出现并着手解决的地方,欢迎加入。