浅谈移动端rem的用法

一 什么是rem?

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了昌乐免费建站欢迎大家使用!

“font size of the root element 这是w3c的定义

也就是说是相对于根节点(html节点)的字体大小的单位。

目前主流的浏览器基本都支持rem这个单位,大部份的默认字体单位是16px。

浅谈移动端rem的用法

图片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

 二 简单应用。

既然确定在各个主流浏览器都能食用的话,我们就放心大胆在移动端进行开发了。

举个例子说明

浅谈移动端rem的用法

-size:62.5%; --size:1

浅谈移动端rem的用法

由于我们选定的浏览器默认字体为16px,将根节点html设置为 font-size:62.5%;,这样换算下来的话 1rem = 10px ,在单位的计算方便将会方便很多。

三 响应式使用。

在实际开发过程中,不论是移动端还是pc端都要兼容各种分辨率的设备,所以实际尺寸是要响应式的。

假如说上个例子的62.5%是基于iPhone5的尺寸,也就是说是320*568的尺寸

如果是ipad尺寸的时候,只要相应的扩大倍数即可

@media only screen and (min-width: 768px){
    html {
        font-size: 150%!important;
    }
}

注:利用媒体查询,可根据自己的实际需要,设定不同的尺寸。

四 rem的进阶使用

先甩上地址 ht   tps://g   ithub.  com/am fe/lib-flexible

说起移动端适配,怎么能少 了淘宝的移动端~

这个教程足够详细了(如果绝对还不够的话,可以参考下这个地址  h   ttp   s://gi   thu   b.com/am   fe/article/issues/17 ,其中还有现成的demo)。

在引入flexible.js过后,关于px转成rem的方法:

在sublime中是有直接转换的插件,有兴趣的童鞋可以去研究下。

在sass/less预编译下也可快速计算当前尺寸。

标题名称:浅谈移动端rem的用法
分享URL:https://www.cdcxhl.com/article40/gsepeo.html

成都网站建设公司_创新互联,为您提供服务器托管微信小程序云服务器网站营销标签优化手机网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站制作