设计稿为375px ,设计rem的适配基础宽度,如果基础宽度设置为10px
1rem = 10px100vw = 375px(设计稿尺寸)
那么设计根节点的font-size时计算公式:
375px = 100vw = 37.5rem
1rem = 100 / 37.5 ≈ 2.6vw那么我们在根节点设置时就可以设置为font-size:2.6vw
在html中设置
/* Mobile */
@media screen and (max-width: 768px) {:root {/* 设计稿尺寸为375px的标准 1rem = 10px,100vw = 375px ----> 37.5rem = 375px = 100vw --- 1rem = 100vw/37.5 = 2.6vw *//*使用时直接10px = 1rem 转换即可 */font-size: 2.6vw;}
}页面使用时在写css时可设计稿的尺寸转换为rem如果设计稿的尺寸是375px的。元素的宽度是50px。那在写css时可以写成:width: 5rem.className {/*使用时直接10px = 1rem 转换即可 */width: 5rem;}
如果涉及稿是750px的。那设置的基础宽度10px
1rem = 10px
100vw = 750px(设计稿尺寸)
750px = 100vw = 75rem
那么: 1rem = 100vw / 75 = 1.3vw那在html中设置的根节点的font-size: 1.3vw/* Mobile */
@media screen and (max-width: 768px) {:root {/*使用时直接10px = 1rem 转换即可 */font-size: 1.2vw;}
}页面使用时在写css时可设计稿的尺寸转换为rem如果设计稿的尺寸是750px的。元素的宽度是50px。那在写css时可以写成:width: 5rem@media screen and (max-width: 768px) {.className {/*使用时直接10px = 1rem 转换即可 */width: 5rem;}
}