代码拉取完成,页面将自动刷新
移动端H5适配一直是困扰前端工程师的大问题,有关于移动端的布局适配方案一直以来都是众说纷纭,对应的解决方案也是有很多种。从最原始的px => rem => vw,随着viewport单位越来越受到众多浏览器的支持,到目前为止不管是哪一种方案,都还存在一定的缺陷。言外之意,还没有哪一个方案是完美的。
其实用什么方案不是重点,重点是我们究竟怎么去实现从UI设计文档到计算出对应宽高字体大小这个过程。今天我们重点来解决这个痛点。
本框架是基于VUE CLI3生成的基本模板,集成了Vuex、Vue-router、e2e/unit等基础插件。在此基础上添加了对px到rem单位的自动处理插件
html
<div class="aspectratio">
<div class="aspectratio-content">
这里是你的内容
</div>
</div>
css
.aspectratio {
/* 这里只写aspect-ratio属性 */
aspect-ratio: '16:9';
}
.aspectratio {
/* 另起一行写其他属性 */
width: xx;
height: xx;
...
}
不需要自动计算的样式请以"ignore"、"hairlines"或者"ig-"开头 html
<div class="ig-menu menu">
<div class="text">
这里是你的内容
</div>
</div>
css
.ig-menu {
/* 这里的样式px不会被计算成rem */
width: 100px;
.text {
/* 这里的样式px不会被计算成rem */
font-size: 14px;
}
}
.menu {
/* 这里的样式px会被计算成rem */
height: 100px;
.text {
/* 这里的样式px会被计算成rem */
font-size: 14px;
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。