给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. unity3d的NGUI简易登录界面

    1.拖两个文本框和一个按钮在界面上,并做相应的重命名处理,结果如下图: 2.新建一个脚本,附加到“Login”上,脚本内容如下: public UIInput name; public UIInput ...

  2. Laravel框架学习（Response）

    1.Response篇 1.1 基本响应 最基本的HTTP响应只需在路由闭包或控制器动作中返回一个简单字符串即可,但是具体业务逻辑中大部分响应都是在控制器动作中返回Response实例或者视图.Res ...

  3. Apollo配置中心转

    尊重原创,本文转自:https://www.cnblogs.com/FlyAway2013/p/8811385.html 前我们项目,所有的配置基本都是通过本地properties 文件进行配置的,比 ...

  4. TextView中超链接拦截

    TextView中的超链接点击时,其实是通过Intent方式的,因此会调用Activity中的startActivity(Intent intent)方法,所以可在此方法中做些简单的拦截操作 例如拦截 ...

  5. redis命令_ZREM

    ZREM key member [member ...] 移除有序集 key 中的一个或多个成员,不存在的成员将被忽略. 当 key 存在但不是有序集类型时,返回一个错误. 在 Redis 2.4 版 ...

  6. poj 1113 Wall 凸包的应用

    题目链接:poj 1113   单调链凸包小结 题解:本题用到的依然是凸包来求,最短的周长,只是多加了一个圆的长度而已,套用模板,就能搞定: AC代码: #include<iostream> ...

  7. redis 服务相关

    一 什么是redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开 ...

  8. javascript深入理解js闭包【手动加精】

    http://www.jb51.net/article/24101.htm 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.   一.变量的作用 ...

  9. 跟着百度学PHP[14]-PDO的预处理语句2

    在$sql = $pdo -> prepare("insert into users(gold,user,password) values(?,?,?)"):条语句我们不仅仅 ...

  10. STL源代码剖析——STL算法stl_algo.h

    前言 在前面的博文中剖析了STL的数值算法.基本算法和set集合算法.本文剖析STL其它的算法,比如排序算法.合并算法.查找算法等等.在剖析的时候.会针对函数给出一些样例说明函数的使用.源代码出自SG ...