给html标签上添加 id=“FontSize”；

你期望满屏的rem值，如：

<html font-size:100px></html>

我的主要内容为1200px，那么我的满屏结果就是1200/100=12rem

            //rem自适应

            document.getElementById("FontSize").style.fontSize = document.body.clientWidth / 12 + "px";//第一次浏览器无滚动条

            document.getElementById("FontSize").style.fontSize = document.body.clientWidth / 12 + "px";//第二次有浏览器滚动条出现后需要再次调用以获取不含滚动条的的视窗宽度

ok，这样就完成了！

JavaScript-rem字体自适应的更多相关文章

  1. javascript控制rem字体大小

    摘要:在写响应式H5页面的时候,我常常会用rem字体,为了兼容多个分辨率的设备,需要写多个@media标签,太麻烦并且不够精致,尤其是移动端的页面往往达不到我想要的效果,后来就用js替代了css的@m ...

  2. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  3. rem实现自适应

    总结一下,rem实现自适应:用rem代替px,配合媒体查询设置font-size:n%. 首先,px是死的.若一律用px,那就会大的显得小,小的屏幕显得大.其次,rem是活的,通过设置字体大小可以引起 ...

  4. 使用rem编写自适应屏幕网页造成div被span撑高的解决办法

    原始代码: <html> <head> <meta charset="utf-8"> <meta content="ie=edg ...

  5. css3 rem手机自适应框架

    css3 rem手机自适应框架 rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便<pre><!DOCT ...

  6. vue+element-ui 字体自适应不同屏幕

    项目背景:屏幕自适应问题,当在不同分辨率的屏幕上显示页面时,页面的字体需要根据屏幕大小来自适应,想到使用rem作为字体的单位 vue-cli脚手架下的index.html中写入以下js脚本 <s ...

  7. wpf-MVVM界面自适应：界面自适应及字体自适应

    原文:wpf-MVVM界面自适应:界面自适应及字体自适应 1,界面自适应 界面先划分Region,每个填充Region的View不设置Width属性,即可按照Region划分的比例,自适应屏幕分辨率 ...

  8. rem字体+百分比布局表格

    效果图: 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 如何利用rem在移动端不同设备上让字体自适应大小

    本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...

  10. 移动端 rem字体的使用demo

        <!doctype html> <html> <head> <meta charset="utf-8"> <title ...

随机推荐

  1. SQL数据库相关

    数据库相关知识点 SQL, 对表的理解, 对表的主键, 外键的理解, 视图, 为什么要有视图, 视图有什么功能, 视图与表有什么区别 主键是唯一标识的一条记录,不能重复,不能为空． 表的外键是另一个表 ...

  2. JavaScript正则表达式基础知识汇总

    一.创建正则对象: 1.构造函数RegExp创建正则对象 var pattern = new RegExp('s$'); //pattern匹配以s结尾的字符串 2.使用正则直接量 var patte ...

  3. cocos2dx 3.x simpleAudioEngine 长音效被众多短音效打断问题

    假设先play长音效a,然后在a播放过程中反复执行:play短音效b,stop b,play b,... 则若a足够长,就会被b打断.而长音效被打断是最不可接受的. a之所以会被打断,推测原因是sim ...

  4. C#通过WIN32 API实现嵌入程序窗体

    本文实例讲述了C#通过WIN32 API实现嵌入程序窗体的方法,分享给大家供大家参考.具体如下: 这是一个不使用COM,而是通过WIN32 API实现的示例, 它把写字板程序嵌在了自己的一个面板中. ...

  5. JDK1.9-新特性

    1. Java平台级模块系统 该特性使Java9最大的一个特性,Java提供该功能的主要的动机在于,减少内存的开销,JVM启动的时候,至少会有30~60MB的内存加载,主要原因是JVM需要加载rt.j ...

  6. FPGA大公司面试笔试数电部分，看看你会多少

    1:什么是同步逻辑和异步逻辑?(汉王) 同步逻辑是时钟之间有固定的因果关系.异步逻辑是各时钟之间没有固定的因果关系. 答案应该与上面问题一致 [补充]:同步时序逻辑电路的特点:各触发器的时钟端全部连接 ...

  7. C语言第十一回合：预处理命令的集中营

    C语言第十一回合:预处理命令的集中营   [学习目标]   1.         宏定义 2.         文件包括"处理 3.         条件编译 预处理命令:能够改进程序设计的 ...

  8. securtCRT右键复制功能配置

    Options->Global Options->Terminal 在右边选择或者取消“Copy on select”和“Paste on right button”的勾选即可打开或者关闭 ...

  9. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

  10. Xcode 10 关于 CocoaPods 安装失败的问题RuntimeError

    xcode 10的情况下执行pod install报错了 RuntimeError - [!] Xcodeproj doesn't know about the following attribute ...