给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. CentOS安装rz\sz命令

    执行以下命令进行安装: yum install lrzsz 安装完成后即可操作rz和sz命令. rz:本地文件上传. sz:Linux系统文件下载到本地.

  2. 转： Tsung：开源多协议分布式负载&压力测试工具

    Main features High Performance: the load can be distributed on a cluster of client machines Multi-pr ...

  3. GSM/GPRS/EDGE简介

    GSM 全球移动通信系统(Global System of Mobile communication),是全球应用最广泛的移动电话标准.GSM被认为是第二代移动通信标准(2G),同时它是一个开放的标准 ...

  4. SQL变量与全局变量

    变量 1.局部变量的声明(一个@) declare @n int   --声明变量关键字为declare 然后@加变量名 后面是变量类型 declare @s varchar(36) 2.局部变量的赋 ...

  5. 解决Ubuntu下博通网卡驱动问题

    sudo apt-get install bcmwl-kernel-source我的无线网卡是BCM4312 802.11b/g 在12.04 会集成驱动,装完就能用,现在用14.04,16.04里面 ...

  6. python访问纯真IP数据库的代码

    通过IP地址判断客户端是网通的还是电信的. 使用一个纯文本的IP纯真数据库,用Python写了一个小程序. 核心代码: #!/usr/bin/env python #site www.jbxue.co ...

  7. 音频采样中left-or right-justified(左对齐，右对齐), I2S时钟关系

    音频采样中left-or right-justified(左对齐,右对齐), I2S时钟关系 原创 2014年02月11日 13:56:51 4951 0 0 刚刚过完春节,受假期综合症影响脑袋有点发 ...

  8. ActiveMQ从源代码构建

    众多开源项目.我们一般都是直接拿过来用之而后快. 只是我们也应该知道这些项目是怎样从源代码构建而来的. 既然代码是写出来的,就不能避免有BUG存在,话说没有完美的软件,也没有无漏洞的程序. 事实上从源 ...

  9. php socket 模型及效率问题

    // 创建套接字 socket_create(); // 绑定 socket_bind(); // 监听 socket_listen(); // 主体, 死循环 while(true){ // sel ...

  10. 写一个php小脚本辅助渗透测试

    因为一个注入要爬行一些数据,然后写的一个小脚本,能写脚本来辅助渗透,也算是里程碑.哈哈哈 <?php $num = 1; while ($num <= 39) { $web_url = & ...