淘宝手机rem的如何使用

 

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