当前第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实现清空画布的三种方法
关于html中<label>标签的for属性的详细分析
HTML5音频与视频问题及解决方法
HTML5的canvas元素有什么作用？<canvas>的简单使用
详细介绍websocket api HTML5规范翻译
canvas画直角坐标系
h5手机扫码怎么实现
移动端HTML5页面生成图片解决方案
详解HTML5的video标签的浏览器兼容性增强方案
看HTML5的七大优势“逼宫”app
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结
