rem适应不同屏幕的布局方案

weixin_44343449

于 2020-03-06 15:46:18 发布

阅读量199

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44343449/article/details/104697538

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

common.less
/pc端的HTML字体大小默认为50/
html {
font-size: 50px;
}

/假设将设计稿分为15份/
@no: 15;
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}