当前第2页 返回上一页
通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：
1 | Html{font-size:62.5%(10/16*100%)}
|
具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
|
3、使用媒体查询
媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。
媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。
例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：
1 2 3 4 5 | @media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
|
4、使用百分比
百分比指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是100%；
所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
以上就是HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
HTML5桌面通知提示功能的实现
h5的所有元素及基本语法归纳
图文详解如何用HTML5 canvas画一条直线
HTML5幻灯片系统：h5slides
浅谈h5的data-*中容易被忽略的一个小问题
HTML5讲解之datatransfer对象
HTML5调用摄像头功能的实现代码
HTML5中设置或返回音视频是否在加载后即开始播放的属性autoplay
HTML5 是什么意思
解析HTML5应用程序缓存application cache
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结
