js实现rem自动匹配计算font-size的示例(js自动输入)

编辑：rootadmin

推荐整理分享js实现rem自动匹配计算font-size的示例(js自动输入)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js自动触发submit,js自动操作网页,js如何自动生成代码,js如何自动触发事件,js自动调用方法,js自动操作网页,js函数自动执行,js自动调用方法,内容如对您有帮助，希望把文章链接给更多的朋友！

实际开发过程中，我们经常会被各种宽度，高度计算搞晕。尤其是使用了rem的计算方式，自适应布局难倒一大片程序员。为了解决这类问题，我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。

下面是相关JavaScript的实现代码：

此代码选px为基准值，为什么选呢，

px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为 x px，而它的CSS逻辑像素数为 x px。所以当要切移动端的页面的时候，需要把效果图宽度等比例缩放到px。

比如当页面中某一div的宽度为，高度为的时候，就可以直接这样写样式：

浏览器的兼容性

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。

不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。

完整实例代码：

标签: js自动输入

本文链接地址:https://www.jiuchutong.com/biancheng/369828.html 转载请保留说明！

上一篇：浅谈Emergence.js 检测元素可见性的 js 插件(浅谈特殊儿童的融合教育论文)

下一篇：原生JavaScript实现Ajax异步请求(原生javascript开发)