当前位置:网站首页 / 技术杂谈 / 正文

浅谈rem适配

时间:2019年05月26日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 243次 | 评论 0

前言:最近用TP5开发了一个博客,深受移动端适配的烦恼(烦烦烦……)终于在翻看了无数博主的文章后有所启发,用“flexible”一锤定音 这里就给大家分享一下心得

    一、必知概念

    1、viewport(视图)

    可以简单的理解为浏览器的可视区窗口


    2、物理像素

     物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度


    3、设备独立像素

    设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素,然后由相关系统转换为物理像素。


    二、如何使用flexible

    1、首先去除已有的meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


    然后引入下面两个文件

<script type="text/javascript" src="js/lib/flexible.js"></script>
<script type="text/javascript" src="js/lib/flexible_css.js"></script>

    若没有以上文件点击下载


        2、因为flexible会将视觉稿分成100份。按照官方的说法:这样做主要为了以后能更好的兼容vh和vw而每一份被称为一个单位a。同时1rem单位被认定为10a。

1a   = 7.5px

1rem = 75px

            可能有人问什么时候不应该使用rem呢?

            

  按照官方说法:字体大小不推荐使用“rem”来作为单位,而仍旧使用“px”来作为单位。并配合用data-dpr属性来区分不同dpr下的的大小。

#div1{
    width:3rem;
    height:3rem;
    font-size:20px
    }
    [data-dpr="2"] #div1 {
        font-size: 40px;
        }
    [data-dpr="3"] #div1 {
        font-size: 60px;
    }


  可能有人会问“data-dpr”是什么?以及是如何达到屏幕适配的?

  “data-dpr”其实是“flexible”这库,会自动根据设备,来添加一个标示。同时也会根据这个标识,来给html加上相对应的font-size的值。

浅谈rem适配 技术杂谈 第1张

    有小伙伴会问这样一个个去换算岂不是很麻烦?喝口水,不慌。

    接下来我来讲一个用lass转格式,,浅谈rem适配 技术杂谈 第2张

浅谈rem适配 技术杂谈 第3张

            算了算了,,我们还是来讲一下rem-unit插件的使用吧(简单粗暴)

            使用了淘宝的 lib-nexible 库之后,我们的根字体基准值就为750/100*10=75px。此时我们从图中若某个标注为100px,那么 css 中就应该设置为100/75=1.333333rem。所以为了提高开发效率,可以使用 px 转化为 rem 的插件。如果你使用 sublimeText ,可以用 rem-unit


     使用:

1、打开插件目录

    进入packages目录:Sublime Text -> Preferences -> Browse Packages...

 2、将下载的插件,解压到打开的插件目录。

 3、设置配置参数

首先打开参数配置文件:

Sublime Text -> Preferences -> Package Settings -> cssrem->Settings-User


写入以下配置参数

{
    "px_to_rem":72,//px转rem单位比例
    "max_rem_fraction_length":3//px转rem的小数部分的最大长度}

配置参数说明:

    px_to_rem - px转rem的单位比例,默认为40。

    max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。

    available_file_types - 启用此插件的文件类型。默认为:[".css", ".less", ".sass"]。

4、重启Sublime Text。


最后:

            本人是一名高职学生,写文章水平有限,如有欠妥之处请多多包含,若能提一两点建议,博主感激不尽


推荐您阅读更多有关于“rem移动端适配,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。