假设根字体font-size的值是40px, 640/40=16,16就是px换算rem的值

function initHtmlFontSize(){

  //获取可可视屏幕的宽度

  var _width=document.body.clientWidth;

  //判断

  _width= _width > 640 ? 640:_width;

  //当前的font-size的值

  var _fs=_width/16;

//赋给html节点

  document.getElementsByTagName('html')[0].style.fontSize=_fs + 'px';

}

initHtmlFontSize()

经过@天桥残局的优化顿时有深度有高度局长daio,上代码:

!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
width && (docEle.style.fontSize = doc.documentElement.clientWidth/16 + "px");
}; win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));

学习web前端技术的笔记,仅供自己查阅备忘,移动对font-size的控制(并非原创)的更多相关文章

  1. 学习web前端技术的笔记,仅供自己查阅备忘,图片上传预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 经验分享:如何系统学习 Web 前端技术?

    这篇文章主要是面向小白用户的,如果你有些基础,当然也建议你看看,尤其是最后一个主题,或许你能得到一些启发.本文的观点,纯属个人自以为是的想法,不是真理,仅供参考. 抛开具体技术细节,先主要谈谈程序员如 ...

  3. 开始学习web前端技术

    不能再蹉跎了,不能再徘徊了,不能再犹豫了,犹豫徘徊等于白来…… 感觉之前浪费了太多的岁月,必须得学习一门实用的技术来充实自己空虚的心情了. 想来想去网页应该是万金油的,大大小小多多少少都得用到.既然如 ...

  4. 绝版珍珍藏:web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  5. 学习Web前端开发时有哪些技术点

    现在学前端的人是越来越多,学习质量也是参差不齐.过来人的身份告诉你,如果你还没有下定决心花时间去学习Web前端,那也可以先找些视频学习下,Web前端开发有哪些常见技术点!接下来,就看看Web前端开发有 ...

  6. 独家分享——大牛教你如何学习Web前端开发

    2014-12-18 14:35:42     引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上 ...

  7. 最受欢迎web前端技术总结

    Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...

  8. web前端安全---读书笔记

    web前端安全---读书笔记 粗略的看完了Web前端黑客技术揭秘前两章了,由于自身的前端功力不深,当然也是初涉前端的安全问题,所以实话还是有些问题看不太明白的.在豆瓣看到的这本书,名字真心有点很肥主流 ...

  9. 零基础如何迅速学习HTML5?新手小白学习web前端H5自白!

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

随机推荐

  1. 【Jenkins】Jenkins权威指南英文版:jenkins-the-definitive-guide.pdf

    原文链接:http://www.bogotobogo.com/DevOps/Jenkins/images/Intro_install/jenkins-the-definitive-guide.pdf

  2. IDS 源镜像端口添加

    把核心交换机的G1/2口镜像到目的交换机的G1/4口,两个交换机之间都是连接的24口 1.核心交换机配置 Ruijie# configure tRuijie(config)# vlan 77Ruiji ...

  3. mkdir 命令详解

    rmdir  <man.linuxde.net> 作用: rmdir 命令用来创建目录,该命令创建由dirname 命名的目录.如果在目录名的前面没有添加任何路径名,则在当前目录下创建由d ...

  4. Python Pandas 库的使用例子

    主要在jupyter notebook里面熟悉这个库的使用,它的安装方法与实现,可自行搜索. Pandas是一个优秀的数据分析工具,官网:http://pandas.pydata.org/ 相关的库使 ...

  5. eclipse 更换 JDK 版本后报错

    在实际开发过程中,可能由于项目的需要,我们需要更换 JDK 的版本.但是更换后会报错,如下: Java compiler level does not match the version of the ...

  6. py2 to py3 return iterator

    Views And Iterators Instead Of Lists Some well-known APIs no longer return lists: dict methods dict. ...

  7. Python列表操作

    自带帮助文档: >>> help(list) Help on class list in module builtins: class list(object) | list() - ...

  8. linux编译php gd扩展

    1 安装gd的依赖包 yum -y install gd gd2 gd-devel gd2-devel zlib freetype 2 安装jpeg: wget http://www.ijg.org/ ...

  9. 视频流GPU解码在ffempg的实现(二)-GPU解码器

    1.gpu解码器的基本调用流程 要做视频流解码,必须要了解cuda自身的解码流,因为二者是一样的底层实现,不一样的上层调用 那cuda的解码流程是如何的呢 在https://developer.nvi ...

  10. volatile关键字是如何起作用的?

    关键字volatile是Java虚拟机提供的最轻量级的同步机制,但是在平时的项目里面,遇到需要多线程的时候更多地使用的是synchronized关键字来进行同步.个人而言,更多的原因是对volatil ...