less文件 引入less文件 方法:
声明:@import "被引入文件名称.less";
定义:
UI设计图尺寸:@my_UI
UI设计图份数:@fs
设计图字节大小:@size
公式:@size : @my_UI / @fs
例如:屏幕尺寸:400px UI设计图尺寸宽度640px 分10份
html页面:
<div></div>
css页面:
@UI_my: 640px;
@fs:10;
@size: @UI_my / @fs;
@media (width:400px){
//设置网页根字节大小
html{
font-size : 400px / @fs;
}
}
div{
width: 100rem / @size;
height: 100rem / @size;
background: red;
}
此时html根字节就调整为40px
宽度在400px屏幕显示的div模块大小 为100*40 / 64 = 62.5px
62.5px / html根字节 = 1.5625rem (UI设计图在400px屏幕单个元素的数值)
remcss原生适配方案
最新推荐文章于 2023-03-13 14:29:35 发布