首页 > 代码库 > 淘宝手机rem的如何使用

淘宝手机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 大小;改变布局

 

淘宝手机rem的如何使用