移动端布局一

本文介绍了移动端布局中关于viewport元标签的使用,解释了width、initial-scale等属性的意义,并探讨了CSS3单位rem在移动端布局中的应用,强调了其相对于em单位的优势。同时,讨论了手机屏幕分辨率与逻辑分辨率的概念。文中提到了两种移动端布局方法,一种是通过设置viewport确保代码按逻辑像素点1:1编写,另一种是利用rem进行适配。最后预告了将要总结的第三种方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先先了解html中这一句话的含义:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">

 width - viewport-的宽度 height - viewport的高度
            initial-scale - 初始的缩放比例
            minimum-scale - 允许用户缩放到的最小比例
            maximum-scale - 允许用户缩放到的最大比例
            user-scalable - 用户是否可以手动缩放

然后在了解一个单位rem

 

rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值