假设根字体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. Hibernate学习---用Session实现CURD

    我们使用Hibernate的目的是什么?对数据库进行操作,所有接下来我们就用Hibernate来进行CURD. 前边我们已经分析过了Configuration,SessionFactory和Sessi ...

  2. Slf4j与其他日志系统兼容的使用

    java生产的各种框架(如spring等)里各个框架会使用不同的日志体系,多个不同日志在一个jvm里混搭会出现一定问题 ,这里梳理一下java体系里常见的日志框架,以SFL4j为中心介绍下跟各个日志框 ...

  3. [WinForm]委托应用①——窗口之间方法/控件调用

    不传参数 第二窗口:public partial class Form2 : Form { /// <summary> /// 定义委托 /// </summary> publ ...

  4. 两个HC-05蓝牙模块互相绑定构成无线串口模块

    HC-05 嵌入式蓝牙串口通讯模块(以下简称模块)具有两种工作模式:命令响应工作模式和自动连接工作模式,在自动连接工作模式下模块又可分为主(Master).从(Slave)和回环(Loopback)三 ...

  5. 使用Vue2完成“小红书” app

    小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...

  6. bzoj 3566: [SHOI2014]概率充电器

    Description 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品--概率充电器:"采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率 ...

  7. 闲来无事做了一个批处理的win10账号管理

    @echo off %1 mshta vbscript:CreateObject("Shell.Application").ShellExecute("cmd.exe&q ...

  8. lesson - 9 课程笔记

    一. yum          作用:                     yum 命令是在Fedora 和RedHat 以及SUSE 中基于rpm 的软件包管理器,它可以使系统管理人员交互和自动 ...

  9. Linux整合Apache和SVN

    1.安装APR-1.2.7和APR-util-1.2.7  (下载地址:http://apr.apache.org/) #tar zxvf  apr-1.2.7.tar.gz #cd   apr-1. ...

  10. Linux如何让进程在后台运行的三种方法详解

    问题分析: 我们知道,当用户注销(logout)或者网络断开时,终端会收到 HUP(hangup)信号从而关闭其所有子进程.因此,我们的解决办法就有两种途径:要么让进程忽略 HUP 信号,要么让进程运 ...