给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. ADB 高级应用

    一.利用无线来查看adb shell > adb tcpip 5555   连接: > adb connect IP:5555   见后文<调试注意事项>   二.模拟按键   ...

  2. ASP.NET MVC 简单的分页思想与实现

    首先我们通过VS创建一个空的基于Razor视图引擎的ASP.NET MVC3 Web应用程序,命名为JohnConnor.Web 对创建过程或Razor不太了解的看官,请移步 ASP.NET MVC ...

  3. JiaThis™“分享到”侧栏代码

    风格:迷你: 猜你喜欢: 开启 使用说明: 复制并粘贴下面的JS代码,放到您的网页,可以在<body>和</body>的之间网页的任意位置放置.如果您的网站使用的模板,     ...

  4. selenium2.0 --常用函数2

    新建实例driver = webdriver.Chrome() 1.获取当前页面的Url函数 方法:current_url 实例: driver.current_url 2.获取元素坐标 方法:loc ...

  5. OSI7层网络模型

    物理层在OSI参考模型中,物理层(Physical Layer)是参考模型的最低层,也是OSI模型的第一层.物理层的主要功能是:利用传输介质为数据链路层提供物理连接,实现比特流的透明传输.物理层的作用 ...

  6. Eclipse+maven开发环境搭建

    版本描述: Eclipse 3.2.2 Maven 2.0.7 Jdk 1.5以上,本例是在jdk1.50版本测试通过 Maven配置过程 Maven官方下载地址:http://www.apache. ...

  7. 所需即所获：像 IDE 一样使用 vim

    所需即所获:像 IDE 一样使用 vim 转载 yangyangwithgnu@yeah.net2015-11-08 10:05:53 谢谢 捐赠:支付宝 yangyangwithgnu@yeah.n ...

  8. 匿名内部类 , Iterable<T> 和 Iterator<T>

    package generic; import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; i ...

  9. 哪个线程执行 CompletableFuture’s tasks 和 callbacks?

    CompletableFuture尽管在2014年的三月随着Java8被提出来,但它现在仍然是一种相对较新潮的概念.但也许这个类不为人所熟知是好事,因为它很容易被滥用,特别是涉及到使用线程和线程池的时 ...

  10. Python unittest 参数化

    准备工作: pip install  nose_parameterized 典型场景:用户名.密码参数化 实例 1,新建一个ftl.py 文件 ,用来将存在于.txt .xlsx 文件中的参数化数据转 ...