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难学吗

h5的多线程如何实现web worker

HTML5 canvas基本绘图之绘制矩形

HTML5存储方式小结

HTML5实现tab切换(通过js代码)

HTML5单页面手势滑屏切换原理分析

h5+js实现本地文件读取和写入

图文详解如何用HTML5 canvas画一条直线

怎样用h5的webgl实现3d虚拟机房的漫游动画

h5缓存-manifest的示例代码分享(图文)

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




打赏

取消

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

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

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

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

评论

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