HTML5 移动页面自适应手机屏幕四类方法总结 - CSDN文库

200 浏览量更新于2023-05-03 收藏 73KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

HTML5 移动页面自适应手机屏幕四类方法总结移动页面自适应手机屏幕四类方法总结

1、使用、使用meta标签：标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方

式及支持程度不同造成了不能兼容所有浏览器或系统。

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

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个

网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部

分。

viewport标签极其属性：标签极其属性：

复制代码代码如下: <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设定的字体大小。下面就是一个例子：

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

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

通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设

置方法如下：

Html{font-size:62.5%(10/16*100%)}

具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过

js一次定义方法如下：

<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';//其中“20”根据你设置的html的font-size属性值做适当的变化

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

</script>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38556668

粉丝: 5
资源: 981

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈