首页 > 代码库 > 淘宝手机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的如何使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。