移动端适配vw方案
方案 移动 适配 vw
2023-06-13 09:16:08 时间
# 1、前言
设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。
# 2、原理
vw是相对单位,1vw表示屏幕宽度的1%。基于此,我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
举个例子。设计师交付的设计稿宽度是750px,设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100% = 4.27% ,换句话说这个标题的字号占屏幕宽度的占比是4.27%,不管任何屏幕都是如此。4.27% 即 4.27vw。
对于任何需要等比缩放的元素,在写CSS设置样式时直接换算成vw即可,尺寸 = 100vw*设计稿标注大小/设计稿宽度。
# 3、适配代码
假设设计稿尺寸是750px,页面有一个按钮,按钮文字标注大小28px,按钮高度标注为48px,宽度为120px,边框为1px不缩放。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
width: 16vw; /* 100vw*120/750 */
font-size: 3.73vw; /* 100vw*28/750 */
line-height: 6.4vw; /* 100vw*48/750 */
border: 1px solid #000; /*不需要缩放的部分用px*/
text-align: center;
}
</style>
</head>
<body>
<div class="button">按钮</div>
</body>
</html>
在写样式时会发现,虽然不用写JS做适配,但标注尺寸换算为vw又麻烦又不直观。
我们可以在CSS里使用calc来换算换,只不过需要注意新语法的兼容性。
:root {
--ratio: calc(100vw/750);
}
.button {
font-size: calc(100vw*28/750); /* 可以直接用calc */
line-height: calc(100vw*48/750);
width: calc(120*var(--ratio)); /* 也可以用calc配合var使用,IE不支持var */
border: 1px solid #000; /*不需要缩放的部分用px*/
text-align: center;
}
在正式的项目里,我们也可以用SCSS,把换算交给预处理器
@function px2vw($px) {
@return $px * 100vw / 750;
}
.button {
width: px2vw(120);
font-size: px2vw(28);
line-height: px2vw(48);
border: 1px solid #000;
text-align: center;
}
# 4、适配方案对比
- viewport缩放方案
- 适配原理简单
- 需要使用JS
- 直接使用设计稿标注无需换算
- 方案死板只能实现页面级别整体缩放
- 动态REM方案
- 适配原理稍复杂
- 需要使用JS
- 设计稿标注的px换算到CSS的rem计算简单
- 方案灵活技能实现整体缩放又能实现局部不缩放
- vw方案
- 适配原理简单
- 不需要JS即可适配
- 设计稿标注的px换算到CSS的vw计算复杂
- 方案灵活技能实现整体缩放又能实现局部不缩放
相关文章
- 2022 WSDM-Xmrec:跨境电商推荐挑战赛题方案
- MySQL慢查询之慢 SQL 定位、日志分析与优化方案
- 微前端方案 qiankun 只是更完善的 single-spa
- 移动端适配动态rem方案
- 合约量化开发系统详情丨量化合约系统开发技术逻辑方案
- 开源方案复现ChatGPT流程!1.62GB显存即可体验,单机训练提速7.73倍
- vue移动端h5页面根据屏幕适配的四种方案
- vue项目移动端、pc端适配方案
- 实现Redis数据共享的可行方案(redis数据共享)
- Oracle ADI:数据库极速管理方案(oracleadi)
- Oracle解决方案:让数据助力企业发展(oracle方案)
- Oracle官方公布最新产品报价清单,一览众多方案与价格(oracle官方报价)
- 解决Linux磁盘空间不足的终极方案(linux 磁盘空间不足)
- 快速搭建可靠的Oracle镜像数据库方案(oracle镜像数据库)
- MySQL数据库实现全文检索的突破性方案(mysql数据库全文检索)
- Oracle 00900错误修复最优方案(oracle-00900)
- 实现基于Redis的多时分K线存储方案研究(分时k线redis存储)