html中js修改字体,rem布局中使用js修改html的fontSize

今天有朋友问我rem布局时，当屏幕宽度不一样的时候如何设置html的font-size的值，所以我就写了一个js供大家参考，如果有更好想法的同学可以回复我哦。

#box{

background: red;

}

#div1{

background: blue;width:10rem;height:4rem;

}

#div2{

background: yellow;width:10rem;height:4rem;

}

(function(doc,win){

var doc = doc.documentElement;

doc.addEventListener('DOMContentLoaded', Resize, false);

// 当DOM加载后执行

win.addEventListener('resize', Resize, false);

// 当屏幕发生变化时执行

function Resize(){

doc.style.fontSize=doc.clientWidth/68.3 +'px'; //屏幕宽度为1366时 html font-size=20px;

//68.3为1366/20计算得出的值，当编写浏览器发生变化时可用编写的浏览器宽度/20得出这个固定值;

}

})(document,window)

最后友情提示：因为每个浏览器的fontSize最小的字体大小不一样，所以尽量使你的html的fontSize在浏览器的合理范围内。

html中js修改字体,rem布局中使用js修改html的fontSize相关推荐

如何修改字体在系统中显示的名称
用ps字体名称显示的是一个网址如何修改字体在系统中显示的名称_Kavfans_百度空间 http://hi.baidu.com/erdvhnqunybkrvd/item/1907af306d6d5d ...
html中加入特殊字体,在html中使用特殊字体
目的:一首诗,要求从右往左读,垂直排列,类似古文效果图: html内容: 在html中使用特殊字体 p{font-size: 54px;} 南歌子词二首柳枝词一尺深红胜曲尘天生旧物不如新合欢 ...
在html中设置按钮字体颜色,html中按钮颜色怎么设置
在html中,可以通过在button按钮元素使用style属性,添加"background-color:颜色值;"样式来设置按钮的背景颜色,添加"color:颜色值;&q ...
给Qt中添加新字体（windows中的字体）
1.首先将字体(我选择windows下的宋体兰亭黑简.ttf)copy至qt_arm下面的lib/fonts目录下 2.设置环境变量export QT_QWS_FONTDIR=/home/works/ ...
ae批量修改字体_|AE多文字样式修改脚本(Dojo Text Updater)下载v1.0 官方版 - 欧普软件下载...
Dojo Text Updater是一款多文字样式修改脚本,有了这款脚本就能够让多个文字图层同时更新样式,包括字体大小.填充颜色.笔触颜色.跟踪和对其等参数,让文字样式修改变得更简单,需要的AE设计师 ...
由于微信字体大小的设置导致rem布局的微信公众号页面发生错乱的问题总结
微信应用中由于字体设置的问题导致的页面错乱适配上一篇文章中总结了在手机端怎么通过rem 动态设置html 的fontSize 值,解决手机端的适配问题,但是在微信中有一个特例. 一般情况下,在rem ...
在android布局中使用include和merge标签
在我们开发Android布局时,经常会有很多的布局是相同的,这个时候我们可以通过<include/>和<merge/>标签实现将复杂的布局包含在需要的布局中,减少重复代码的编写 ...
【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
文章目录一.Ability 与 Slice 简介二.Ability 中使用纯代码绘制布局及 UI 组件三.Ability 中使用纯代码绘制布局及 UI 组件代码示例四.GitHub 地址一. ...
html中如何设置所有文本字体,如何设置HTML页面中文本的字体
字体属性介绍 CSS中的字体属性是干什么的呢?字体字体确定和字体有关咯,就是设置HTML页面中文本的字体, CSS中经常使用的字体属性有几种呢,笔者给你们梳理了下,比较经常使用的一共有5种,今天咱们就 ...

html中js修改字体,rem布局中使用js修改html的fontSize

html中js修改字体,rem布局中使用js修改html的fontSize相关推荐

最新文章

热门文章