脑课堂编程教育

如何使用“flexible”

前端技术 4年前
226 0 0
脑课堂编程培训

如何使用“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。以750视觉稿(效果图)为例子举例:

1a   = 7.5px

1rem = 75px

得到这样的一个换算关系,那跟我们有什么关系呢?

有了这样的一个关系,这样我们就可以直接来使用rem单位来布局,以此来达到各机型的适配。

如果还有朋友不懂如何换算的话,我在举个例子:以宽640的效果图为案例!

一张图片的宽、高都是160px。那么换算成rem单位就是:2.667rem

 width:200px; ----> width:2.5rem;

 height:200px; --->height:2.667rem;

可能会有朋友问?那文字也是用“rem”还是“px”作为单位呢?

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

#div1{
    width:3rem;
    height:3rem;
    font-size:15px
}
[data-dpr="2"] #div1 {
    font-size: 30px;
}
[data-dpr="3"] #div1 {
    font-size: 45px;
}

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

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

如此一来,页面中的元素,他们会根据html元素的font-size值做相应的计算,从而实现屏幕的适配效果。

好啦,基本布局没问题啦,可能有些小伙伴可能还在想:"怎么快速换算px与rem之间的关系啊"。

不过不用担心,这里刚好有一个sublime text px转化rem的插件,可以满足你的需求。

file

使用方式:

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。

收藏

本文标题:如何使用“flexible”

本文链接:https://naoketang.com/p/jkl51246qo1y

评论区

推荐课程