如何使用“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的插件,可以满足你的需求。
使用方式:
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。