第148天:js+rem动态计算font-size的大小,适配各种手机设备
需求:
在不同的移动终端设备中实现,UI设计稿的等比例适配。
方案:
布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。
假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem。设计稿中标注的任何px数值都可以换算成px/100的rem值。
就是说,每一个设备的宽度都定为7.5个rem,然后宽度非750px的设备里,就需要用JS对font-size做动态计算。
换算关系为:根节点的font-size=设备宽度/7.5。
即:document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';
注:需要考虑到dpr,即一倍屏两倍屏的问题。
http://mobile.51cto.com/web-484304.htm
备注:
每个浏览器对最小font-size的支持,不尽相同。js动态计算的font-size值太小时,会导致超小屏上UI显示效果比预想中的偏大。
比如,font-size计算是10px,但是chrome只支持到12px,他就按照12px去渲染了,这就会导致UI偏大了。(上面方案中的100px肯定是没有问题的)
具体表现:
浏览器 最小支持font-size
PC chrome 12px (可以通过安装Advanced Font Settings插件支持到6px)
Android和iOS 1px(只测试了主流浏览器,未做充分测试)
cordova(Android和iOS) 9px
//orientationchange方向改变事件
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值
doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
})(document, window);
//alert(document.documentElement.clientWidth/320)
第148天:js+rem动态计算font-size的大小,适配各种手机设备相关推荐
- java 月份适配计算_js+rem动态计算font-size的大小适配各种手机设备
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:使用js动态改变html的字体大小font-size+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备 ...
- rem动态计算rem
(function (doc, win) { console.log(doc); var docEl = doc.documentElement, resizeEvt = 'orientationch ...
- 动态计算字符串的字体大小并据此设置行间距---NSAttributedString
#pragma mark-计算字符串的字体大小并据此设置行间距 + (NSMutableAttributedString *)caculateLabelHeightWithMutableAttribu ...
- 移动端布局js动态计算rem
rem原理: 其实rem布局的本质是等比缩放,一般是基于宽度,通过更改html元素的font-size字体大小,就可以让子元素实际大小发生变化 推荐一篇文章: https://segmentfault ...
- 理解 css rem与动态计算rem
1.rem定义? 首先css3规定1rem = html根节点的font-size,rem也就是root em简写. 为了方便计算通常设置根节点font-size = 100px 那么 1rem = ...
- 移动端开发使用rem时动态设置html的字体大小
1.动态设置html的字体大小 移动端开发时习惯使用rem单位,而rem是基于根html的字体大小的,为了适配不同尺寸屏幕需要动态设置html字体的大小.我们一般习惯于设置html的字体大小是基于iP ...
- 如何避免动态字体Font Texture过大
这是第148篇UWA技术知识分享的推送.今天我们继续为大家精选了若干和开发.优化相关的问题,建议阅读时间10分钟,认真读完必有收获. UWA 问答社区:answer.uwa4d.com UWA QQ群 ...
- 移动端适配+flexible.js+rem适配
移动端适配 前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
- 移动布局+百分比布局+em+rem+动态设置根元素fontSize
流式布局 移动端大量使用CSS3盒子模型 box-sizing box-sizing: border-box; 很重要 移动端特殊样式 如何动态设置html的 font-size 开始 js动态设置代 ...
最新文章
- PHP的cookie与session的使用
- There is no isNullOrEmpty for collections in Guawa
- box-sizing 属性
- java web 默认页面配置文件_Tomcat中配置全局的错误页面(如404)+删除Tomcat中webapps目录下的自带项目,防止Tomcat默认文件泄露...
- 【收藏】用户私自搭建伪服务器怎么办?禁它
- 神策数据正式成为国家级信创工委会成员单位
- C# MVC 项目下的路由配置-RouteConfig
- Python 爬虫进阶三之 Scrapy 框架安装配置
- IOC操作Bean管理XML方式(xml自动装配)
- swat模型_SWAT-CUP(SUFI-2)的工作流程
- git已经删除了远程分支,但本地环境仍能看到远程分支
- Layui--弹出层layer
- latex中的对号和错号
- 深度学习优化算法大全系列6:Adam
- No package ‘mate-settings-daemon‘ found
- 来个水帖:下载Dev
- leach分簇功能实现matlab,LEACH分簇算法实现和能量控制算法实现
- matlab由方波转换为梯形波,matlab怎样将方波转换为二进制数据
- 空间和时间 ----节选《时间简史》 霍金
- 配置与管理Ubuntu 21.10
热门文章
- python整商运算符_python中的运算符
- “你的手机上未安装应用程序”的解决方案
- Java字符串编码转换UTF-8
- 0x80070659系统策略禁止这个安装 vc_不安装DNS解析服务器下安装Vcenter6.7
- android intent.putextras,关于android:如何使用putExtra()和getExtra()来表示字符串数据
- 计算机系统化科学化和什么,自动化概论复习资料
- linux 链接 文件,聊聊 Linux 里的文件链接
- JDK/Java 16 可能带来什么新特性?
- mybatis there is no getter named forInteger
- 自动化系列-pyppeteer键盘输入点击