前置知识：
1. rem是相对于根元素也就是<html>元素的字体大小的单位。
html { font-size: 12px; }
p { font-size: 2rem; /*24px*/}2. vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px
前端屏幕自适应方案：
通过改变根元素的字体大小，进而对页面进行等比例缩放，从而实现自适应。
1. 屏幕缩放比 = screenWidth / designWidth
2. 等比缩放后的元素大小 = 设计稿元素大小 * screenWidth / designWidth + 'px'
= 设计稿元素大小 / designWidth * screenWidth + 'px'
3. 令根元素字体大小为htmlFontSize = screenWidth = 100vw，
则，等比缩放后元素大小 = 设计稿元素大小 / designWidth * htmlFontSize + 'px';
等比缩放后元素大小 = 设计稿元素大小 / designWidth + 'rem';
代码实现：
1. 设置根元素字体大小为屏幕宽度
html{
font-size: 100vw;//屏幕宽度
}2. 用sass函数，将px转换为rem
将元素的px单位转为rem
@function px2rem($px) {
$rem : 1920px;/**设计稿宽度**/
@return ($px/$rem) + rem;
}
3. 使用
div元素设计稿宽度是100px，使用px2rem进行等比缩放。
div{
width: px2rem(100px)
}
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
