js实现rem自动匹配计算font-size的示例
作者:herman 发布时间:2023-08-22 11:02:33
实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员。为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。
下面是相关JavaScript的实现代码:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
此代码选640px为基准值,为什么选640呢,
640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的CSS逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候,需要把效果图宽度等比例缩放到640px。
比如当页面中某一div的宽度为60,高度为65的时候,就可以直接这样写样式:
{
width:0.6rem;
height:0.65rem
}
浏览器的兼容性
rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧,谁让这个Ie6-8这么老呢?大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。
完整实例代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>响应式布局</title>
<style>
html{font-size: 20px;width: 100%;height: 100%;}
body{margin: 0;padding: 0;}
header,footer{width: 100%;background: #17A578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;}
.footer{position: fixed;bottom: 0;}
.box{}
.public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;}
.left{background: #f00;}
.center{background: #048F74;}
.right{background: #000;}
</style>
</head>
<body>
<header>页面头部</header>
<div class="box">
<div class="public left">左</div>
<div class="public center">中</div>
<div class="public right">右</div>
<div class="public left">左</div>
<div class="public center">中</div>
<div class="public right">右</div>
</div>
<footer class="footer">页面底部</footer>
<script>
//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)
</script>
</body>
</html>
来源:https://www.xttblog.com/?p=2318
猜你喜欢
- 代码如下:ALTER function [dbo].[GetOrderNum]( @ebaystockflag varchar(20)//规
- 原本运行正常的ASP页面,今天突然提示: 代码如下: Microsoft VBScript 运行时错误 错误 '800a01a8&
- 声明定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/I
- 第一列按照goodsid局部分组,然后在分组后的记录中按照audittime升序排序得到序号,从而显示某商品得第几次变迁。 第二列是取该商品
- 以前的服务器,由于内存的价格过高,一般配置的内存不是很多,超过4GB的当然就不多了.现在的服务器,配置超过4GB就很多,在配作SQL 数据库
- 作者的BLOG:http://www.planabc.net/地图弹窗(map pop)具体演示运行代码框<!DOCTYPE html
- 1.查询高于平均价格的商品名称:SELECT item_name FROM ebsp.product_mark
- 这是一种相对比较复杂的图表,但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签dl可能平常我们见得不多,一般我们在做列表的时候通
- Server对象提供对服务器上访问的方法和属性.大多数方法和属性是作为实用程序的功能提供的。语法:Server.property|metho
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 小的本身是一个平面设计人员,前一阵儿有一些空闲的时间,便在各个站长网上发布了贴子,大意是免费制作logo,以换取网站连接(相信很多人都看过)
- 首先数据库里需要有一个自动编号字段(ID)。然后第一次访问的时候,取出所有记录,定制好每页的记录数PageSize,计算出页数,然后根据页数
- 随机显示图片代码:<div class="sidebarcen"><script language=&
- floor() 函数向下舍入为最接近的整数。语法floor(x)参数描述x必需。一个数。说明返回不大于 x 的下一个整数
- XA事务支持限于InnoDB存储引擎。MySQL XA实施是针对外部XA的,其中,MySQL服务器作为资源管理器,而客户端程序作为事务管理器
- (1)序列化即js中的Object转化为字符串1.使用obj.toJSONString()var str=obj.toJSONString(
- 今天搭了个“发短信”的页面,找朋友测试,没想到一位大侠直接弄了本长篇小说发我手机上……为了我的宝贝手机能继续健康澎湃,给文本区域(texta
- 最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经
- 首先说明下范围用Javascript来开发WEB页面的动画效果该思路同时考虑页面效率、SEO,如果数据大,也可以缓解后端压力。这个是程序设计
- 本文实例讲述了es6函数之严格模式用法。分享给大家供大家参考,具体如下:从es5开始,函数内部可以设定为严格模式。function doSo