1.主要介绍几个移动端常用的单位rem、vw、vh，配合传统的px、百分比、<viewport>标签，兼容适配移动端的各种分辨率的手机端。
rm : 这个单位是以父元素为标准来进行计算 ， 例如：父元素 font-size:16px; 子元素 ： font-size:0.875em ; 则子元素 font-size: 0.875*16
rem ： 而这个单位是以 root 根元素标准来计算的。
vw ： 屏幕宽度相关，1vw是屏幕宽度的1%
vh ： 屏幕高度相关，1vh是屏幕高度的1%
2. 用 rem 进行 移动端适配
定义html一个标准样式,当宽度为 320px 时候，根font-size 为16 px;
html{
width:320px;
font-size : 16px;
}
我们可以得到 1rem = 16px;
html{
font-size:16px;
width:20rem
}
那么当屏幕为 400 时候呢？我们的 width 还应该是 20rem;
这个时候我们就要计算出 1rem 为多少(也就是 html 的 font-size为多少 )；
1rem = 400/320*16 , 所以得到
html{
font-size : (400/320*16)px
width:20rem
}
这里我们只要改变 html 的font-size 既可以进行宽度调整了。
3.项目中布置
得到设计图宽度 w;并设置 html 在 w 宽时候的 font-size 的size;
html{
widht:w px;
font-size:size px;
}
得到每像素px多少rem 的宽度 baseRem = size/w;
使用sass的函数得到 像素px 对应的 rem
@function rem($w) @return ($w*baseRem)*1rem
html{
font-size : size px
width:rem(wpx)
}
@media screen and (min-width:320px) and (max-width:320px){
html{ font-size: 320 / $basicRem; }
}
@media screen and (min-width:400px) and (max-width:400px){
html{ font-size: 400 / $basicRem; }
}
这里同样是改变 html 的 font-size 大小；改变布局
时间： 2024-10-12 11:05:57