rem布局,js动态设置html的fontsize大小
rem布局,js动态设置html的fontsize大小，使rem对应的值改变，但是并没有成功，只有在css中改变html的fontsize，rem才有用...
rem布局,js动态设置html的fontsize大小，使rem对应的值改变，但是并没有成功，只有在css中改变html的fontsize，rem才有用
展开
7个回答
展开全部
1、创建一个名称为fontsize的html文件。
2、在body中加入p元素和button按钮。
3、在自定义函数中创建一个字符串。
4、用fontsize方法设置字符串的字号为5号。
5、将返回的5号字符串赋值到p元素中。
6、在浏览器中运行该文件点击button查看返回5号字号的字符串。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');
var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 16 + 'px';
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接上代码，你看一下，我用这个是对应最小屏上12px字体，大于768的都在768之内。话不多说，直接上代码
$(function () {
docEl = document.documentElement;
var width = docEl.clientWidth>768?768:docEl.clientWidth;
fontsize = 12 * (width / 320) > 12 ? 12 * (width / 320) : 12;
docEl.style.fontSize = fontsize + 'px';
window.onresize = function () {
docEl = document.documentElement;
width = docEl.clientWidth>768?768:docEl.clientWidth;
fontsize = 12 * (width / 320) > 12 ? 12 * (width / 320) : 12;
docEl.style.fontSize = fontsize + 'px';
}
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
rem是相对于页面根节点（也就是Html节点）的字体大小的页面布局方式。
一般使用rem的方法是：
<!DOCTYPE html>
<html style="font-size:100px">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=320px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>手机端模板</title>
<script>
(function(doc, win) {
var html = doc.getElementsByTagName("html")[0],
// orientationchange->手机屏幕转屏事件
// resize->页面大小改变事件(一边pc端有用)
reEvt = "orientationchange" in win ? "orientationchange" : "resize",
reFontSize = function() {
var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
if(!clientW) {
return;
}
html.style.fontSize = 100 * (clientW / 375) + "px";
}
win.addEventListener(reEvt, reFontSize);
// DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
doc.addEventListener("DOMContentLoaded", reFontSize);
})(document, window);
</script>
</head>
<body>
</body>
<script></script>
</html>
先将html节点的字体大小设置一下，作用是在重置rem的js代码没有执行完以前，我们有一个自己设置默认的rem使用
编写script代码重置rem，我这儿的代码是使用375px宽度的设计稿为参照对象。如果想自己修改可以看到上面有一个375,375px大小设计稿对应的就是375，一对一就可以了。现在，在375px宽的屏幕下，1rem代表的就是100px，3.75rem就是整个屏幕宽度了，当屏幕宽度改变时1rem代表的宽度会改变，不过其所占的屏幕比例不会变，也就是3.75rem还是整个屏幕的宽度。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以使用媒体查询为不同的屏幕设置不同的html font-size的大小
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
