淘宝手机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 大小;改变布局
感觉可以就推荐下吧!!
感觉可以就推荐下吧!!
感觉可以就推荐下吧!!
感觉可以就推荐下吧!!
感觉可以就推荐下吧!!