PC端使用rem进行屏幕适配
之前做PC端网页一直不知道如何去做屏幕适配,特意去搜,看到一篇文章后豁然开朗,先奉上链接。
PC端适配屏幕尺寸 - 瓦力博客
详细的可以去看文章,我在这里只做一下简单总结。
How to do
假定设计稿宽度为 1600px,某个box设计稿宽度为400px。
html {
font-size: 16px; // 设计稿宽度/100 => 1rem = 16px
}
#box {
width: 25rem; // 400px/16px
}
@media only screen and (max-width: 1366px) {
html{
font-size:13.66px; // 1rem = 13.66px
}
}
工具
- Sass
@function px2rem($px, $base-font-size) {
@if (unitless($px)) { //unitless函数判断有无单位,无单位返回true
@return ($px / $base-font-size) * 1rem;
} @else if (unit($px) == em) {//函数取出传入参数的单位 px/em/rem..
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
#box {
width: px2rem(400, 16);
}
//编译为
#box {
width: 25rem;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步