html5自适应代码| html5 手机自适应代码
发布-xiaoming | 浏览量-
方案一：元素的宽高用rem来定义
(function () {
document.addEventListener('DOMContentLoaded', function () {
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 6.4 + 'px';
// 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
}, false);
})();
// 这个6.4就是根据设计稿的横向宽度来确定的，假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';
举例：
.icon {
width: 1.4rem;
height: 1.4rem;
margin: 0 0 0 .5rem;
}
方案二：元素的字体大小用em和媒体查询结合使用：
1：备注，这样的话字体的设置与元素的宽高设置分开
@media screen and ( max-width : 320 px ) {
body {
font-size : 14 px ;
}
}
@media screen and ( min-width : 321 px ) and ( max-width: 413 px) {
body {
font-size : 16 px ;
}
}
@media screen and ( min-width : 414 px ) and ( max-width: 639 px) {
body {
font-size : 17 px ;
}
}
@media screen and ( min-width : 640 px ) {
body {
font-size : 18 px ;
}
}
举例：
.icon {
width: 1.4rem;
height: 1.4rem;
margin: 0 0 0 .5rem;
}
附加移动最小字体测试：挺好用的：http://www.cnblogs.com/he-lian/p/4512276.html
总结：结论：移动端最小字体为12px（仅chrome有此限制），建议最小使用12px；
如果设计稿中有小于12px的字体，按实际字号写css样式；
结论2： iphone类移动设备不受最小字号限制；
其它设备可能会受8px限制；
chrome中限制最小12px。
原文地址：http://www.35ui.cn/post/20160822749.html
标签：HTML5自适应代码
上一条： cookie总结以及html5中的session比较
下一条： html5手机移动端WEB资源整合 移动前端头部标签(HTML5 head meta)
或许你还对下面的文章感兴趣
