给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. js根据对象的某一属性进行排序

    function compare(property) { return function (a, b) { var value1 = new Date(a[property]); var value2 ...

  2. AsyncHttpClient来完成网页源代码的显示功能,json数据在服务器端的读取还有安卓上的读取

    一.使用AsyncHttpClient来完成网页源代码的显示功能: 首先.我们引入 步骤: 1.添加网络权限 2.判断网页地址是否为空 3.不为空的情况下创建客户端对象 4.处理get/post请求 ...

  3. Paper Reading 1 - Playing Atari with Deep Reinforcement Learning

    来源:NIPS 2013 作者:DeepMind 理解基础: 增强学习基本知识 深度学习 特别是卷积神经网络的基本知识 创新点:第一个将深度学习模型与增强学习结合在一起从而成功地直接从高维的输入学习控 ...

  4. c#, extract number from string

    using System.Text.RegularExpressions; string numberStr = Regex.Match (str, "[0-9]").Value; ...

  5. 【进程线程与同步】5.4 System.Threading.Interlocked 为多个线程共享的变量提供原子操作

    using System; using System.Threading; internal class Program { private static long _counter = 1; pri ...

  6. JSP应用开发 -------- 电纸书(未完待续)

    http://www.educity.cn/jiaocheng/j9415.html JSP程序员常用的技术   第1章 JSP及其相关技术导航 [本章专家知识导学] JSP是一种编程语言,也是一种动 ...

  7. atitit.图片相似度与图片查找的设计 获取图片指纹

    atitit.图片相似度与图片查找的设计. 1. 两张图片相似算法 1 2. DCT(离散余弦变换(DiscreteCosineTransform))编辑 2 3.  编辑距离编辑 3 4. Java ...

  8. Outlets 和Referencing Outlets的区别

    转自:http://blog.sina.com.cn/s/blog_4431c7610100sypy.html 我的理解就是连接与被连接的关系吧 Outlets里面显示的是你的属性, 以及连接着的目标 ...

  9. python学习之time模块

    time.time() 将时间作为浮点数返回. 在Windows和大多数Unix系统上,时代是1970年1月1日00:00:00(UTC),并且闰秒不计入从时代开始的秒数. >>> ...

  10. COOKIE和session的机制详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...