使用Flexible实现H5页面的终端适配
使用方法
建议对于js做内联处理
,在所有资源加载之前执行这个js。
执行这个js后,会在html
(也就是document.documentElement)上增加一个data-dpr
属性,以及font-size
样式。
之后页面中的元素,都可以用rem单位来设置。html
上的font-size
就是rem的基准像素。
把视觉稿中的px转换成rem
首先,目前视觉稿大小分为640
,750
以及,1125
这三种。
当前方案会把这3类视觉稿分成100份
来看待(为了以后兼容vh,vw单位)。每一份被称为一个单位a。同时,1rem单位认定为10a。拿750的视觉稿举例:
1a = 7.5px
1rem = 75px
因此,对于视觉稿上的元素的尺寸换算,只需要原始px值
除以rem基准px值
即可。例如240px * 120px的元素,最后转换为3.2rem * 1.6rem。
字体不使用rem的方法
字体的大小不推荐用rem作为单位。所以对于字体的设置,仍旧使用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; }
手动配置dpr
引入执行js之前,可以通过输出meta标签方式来手动设置dpr。语法如下:
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
其中initial-dpr
会把dpr强制设置为给定的值,maximum-dpr
会比较系统的dpr和给定的dpr,取最小值。注意:这两个参数只能选其一。
手动设置rem基准值的方法
输出如下css样式即可:
html {font-size: 60px!important;}
一些常用APIs
[Number] lib.flexible.dpr
当前页面的dpr值
[Number] lib.flexible.rem
当前页面的rem基准值
[Number|String] lib.flexible.rem2px([Number|String digital])
把rem转换为px
[Number|String] lib.flexible.px2rem([Number|String digital])
把px转换为rem
lib.flexible.refreshRem()
刷新当前页面的rem基准值
栅格系统
需引入makegrid.js
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/makegrid.js"></script>
使用方法
lib.flexible.makeGrid(params)
- [Object params]
- designWidth - 设计稿宽度
- designUnit - 设计稿最小单位a(以px为单位)
- columnCount - 栅格列数
- columnXUnit - 栅格列宽(以a为单位)
- gutterXUnit - 栅格间距(以a为单位)
- edgeXUnit - 页面左右边距(以a为单位)
- className - 栅格样式的名称(可省略,默认为grid)
通过传入视觉的栅格规范定义,可以输出对应的css样式。
lib.flexible.makeGridMode(modeName)
- [String modeName]
方案还预置了几个默认的栅格规范,分别是750-12
,750-6
,640-12
,640-6
。
利用meta输出栅格样式
<meta content="designWidth=750, desginUnit=6, columnCount=12, columnXUnit=7, gutterXUnit=3, edgeXUnit=4" name="grid" />
或
<meta content="modeName=750-12" name="grid" />
栅格代码举例
<div class="grid"><div class="col-4"></div><div class="col-4"></div><div class="col-4"></div> </div><div class="grid"><div class="col-6"></div><div class="col-6"></div> </div><div class="grid"><div class="col-3"></div><div class="col-4"></div><div class="col-5"></div> </div>
转载于:https://www.cnblogs.com/fxtt/p/6185050.html
使用Flexible实现H5页面的终端适配相关推荐
- 使用Flexible实现手淘H5页面的终端适配
转载自:使用Flexible实现手淘H5页面的终端适配 更多参考:移动端高清.多屏适配方案 移动端应该如何动态设置字体大小? 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟 ...
- android 挖孔屏适配_使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
- 使用Flexible实现手淘H5页面的终端适配【转】
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
- 使用Flexible实现手淘页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
- H5页面rem兼容适配及华为样式调整
H5页面rem兼容适配 $(document).ready(function(){//rem兼容var winW = $(window).width();var constant = winW/6.4 ...
- H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- h5页面手机端适配头
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, ...
- 手机端h5页面字体大小适配
为解决适安卓手机跟苹果手机字体大小和高度不一致的问题: 首先设置初始字体:由于浏览器默认(因为1em=16px,所以0.625em=10px): 设置初始字体大小为62.5%:然后根据不同的屏幕尺寸计 ...
最新文章
- [OS复习]设备管理2
- Navicat mysql 加索引_mysql 索引 (Navicat添加索引)
- 划分VLAN,根据每个VLAN通过DHCP分配IP地址
- 抢疯了~调研了数10+大厂的AI人才需求的公开课,现在免费学
- ORACLE数据迁移参考
- matlab中如何调用gpu进行并行计算_极致安卓-Termux/Aid learning开启WebGL手机GPU并行计算...
- 速度更新!GoCD又曝仨洞,极易遭利用且结合利用可成供应链攻击的新跳板
- java并发编程(3)避免活跃性危险
- Mac新手必备技巧-如何使用 macOS 帮助菜单?
- 【回归预测】基于matlab哈里斯鹰算法优化混合核极限学习机KELM回归预测【含Matlab源码 1751期】
- 《博德之门3》的许多设计,还不如上世纪的前作
- office安装双击setup后点击‘立即安装’无反应(闪退)
- SHAP可解释工具的理解及应用
- CAD制图怎么使用CAD修剪命令呢?
- ubuntu 使用LVM修改分区大小后开机报错的解决办法
- 联邦学习攻击与防御综述
- 很好用的壁纸网站源码分享,仅供学习,请勿商用。
- 位图排序算法优化篇-永无止境
- 信息安全导论 实验四 RSA算法(不要求支持大数)
- CCF A类会议或期刊----多视图,多模态近两年论文
热门文章
- 我的docker随笔15:MySQL启动时自动创建数据库
- 气体管道管径及流量对照表_建筑用管道产品常见技术质量问答汇总
- 【Spring】Spring Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required
- 80-450-010-原理-MySQL索引
- Elasticsearch 节点磁盘使用率过高,导致ES集群索引无副本
- 【Elasticsearch】Elasticsearch 基于scoll技术滚动搜索大量数据
- 【MySQL】MySQL每秒统计一次showglobal status
- Linux : Notepad++ 远程连接linux
- 【安全】JAAS/GSS-API/SASL/Kerberos简介
- mac安装cmake