移动端开发之根元素rem单位计算函数
2018-10-29 11:22
141 查看
什么是rem
rem与em是用作手机端的单位,rem是根据根元素html来定义的一个单位大小,尔em是根据父元素继承计算的单位值,因此我们更多的会使用到rem单位。那么我们如何定义根元素HTML的大小呢?请看下面代码:
$(function(){ function setRem(){ var windowWidth = $(window).width(); console.log(windowWidth); var rem = parseInt(windowWidth/375*100)+'px'; $('html').css('font-size',rem); console.log(rem) } setRem(); var timer; $(window).on('resize',function(){ timer=setTimeout(function(){ clearTimeout(timer); setRem(); },50) }) })
代码非常的简单,我们通过获取到当前设备的宽度除以一个css像素值,这个css像素值是我们定义的一个标准,例如在375的屏幕宽度下我们获取到的宽度是100px,如果屏幕更多则值相应变大,当屏幕的宽度在实时变化时我们可以调用一个一次性函数使得屏幕改变后有一定的延迟去改变HTML的fontsize,这个一次性函数不是必然的可以不写。而设置为100px或者是10px这个值不是我们想要的,我们只是为了方便计算,我们设置全局字体时同样可以直接在body设置了,注意这里设置的是rem值,如下代码:
body{ background: red; font-size: .2rem; }阅读更多
相关文章推荐
- 移动端开发(二):rem单位的计算问题
- 移动端开发(二):rem单位的计算问题
- 移动端那些事儿(三)移动端开发流行单位rem
- 以rem为单位移动端页面开发
- 移动端开发,rem单位妙用,自适应
- 移动端开发rem单位的格式化js文件flexible.js
- 移动端开发流行单位rem的几点看法
- 移动端页面使用单位的问题:关于px、百分比、em、rem开发中逐渐转换的问题记录
- 段落p元素内的响应式文本布局就靠rem单位实现
- 移动端初设置(使用rem作为单位)
- 移动端布局字体单位的选择之px、rem和em揭秘
- 创建函数计算目标元素到浏览器窗口的距离
- 关于移动端css用rem单位的情况
- 关于使用定义函数来实现对于数组c中的元素进行筛选最大值最小值,计算平均值等操作
- 前端开发常用单位px em rem
- 计算一个数组所有元素之和(基于多处理器的并行开发讨论)
- 移动端页面开发 rem.js适配
- 移动端页面以rem为单位设置字体大小不生效解决方法
- 使用rem来开发你的移动端网站
- 移动端开发rem适配js代码