HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结


本文摘自PHP中文网,作者黄舟,侵删。

这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下

1、使用meta标签:viewport

H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性:

复制代码

代码如下:

1

2

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,

maximum-scale=1.0, user-scalable=no"/>

每个属性的详细介绍:

2、使用css3单位rem

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

1

p {font-size:14px; font-size:.875rem;}

默认html的font-size是16px,即1rem=16px,如果某p宽度为32px你可以设为2rem。

阅读剩余部分

相关阅读 >>

HTML5的文本样式实例介绍

如何解决HTML5微信播放全屏问题

HTML5文件上传插件遇到的技术问题

HTML5规定元素的上下文菜单属性contextmenu

HTML5和flash的区别有哪些

HTML5 canvas绘制五角星的方法

采用HTML5+signalr2.0(.net)实现原生web视频的代码分享

HTML5中使用json对象的实例代码

HTML5与flash比较的详细介绍

如何让HTML5实现移动端复制功能

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...