使用flexible适配移动端h5页面

flexible是淘宝提供的一套REM手机适配的库，用法也非常简单

首先，在页面中引入相关资源包括flexible.js和flexible_css.js(用于清除默认样式)，或者通过cdn方式引入

然后通过实际的px大小/根元素font-size的大小，就得到了rem的值，这里提供了一个sublime的cssrem的插件，可以快速将px转换成rem值，插件地址https://github.com/flashlizi/cssrem 安装使用安装 ● 下载本项目，比如：git clone https://github.com/flashlizi/cssrem ● 进入packages目录：Sublime Text -> Preferences -> Browse Packages... ● 复制下载的cssrem目录到刚才的packges目录里。 ● 重启Sublime Text。配置参数参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem ● px_to_rem - px转rem的单位比例，默认为40。 ● max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 ● available_file_types - 启用此插件的文件类型。默认为：[".css",".less",".sass"]。

修改配置参数，支持在html中转换rem

{
    "px_to_rem": 37.5,"max_rem_fraction_length": 6,"available_file_types": [".css",".sass",".html"]
}

px_to_rem是px转rem的单位比例，设置为设计稿的1/10即可，例如我们是750px的设计稿，则这里可以设置为75，当然这个是按照2倍设计图来计算的，假如是375px则设置为37.5，最终这个值在html根元素中会生成font-size:37.5px

前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
    font-size: 24px;
}
[data-dpr="3"] div {
    font-size: 36px;
}

为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：

@mixin font-dpr($font-size){
    font-size: $font-size;
[data-dpr="2"] &amp; {
    font-size: $font-size * 2;
}

[data-dpr="3"] &amp; {
    font-size: $font-size * 3;
}
}

有了这样的混合宏之后，在开发中可以直接这样使用：

@include font-dpr(16px);

当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位。

参考文章 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

作者：fozero 声明：原创文章，转载请注明出处，谢谢！标签：flexible,rem

使用flexible适配移动端h5页面

猜你在找的HTML5相关文章