淘宝手机rem的如何使用

最新推荐文章于 2022-10-28 17:09:24 发布

原创最新推荐文章于 2022-10-28 17:09:24 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

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 大小；改变布局