学习web前端技术的笔记,仅供自己查阅备忘,移动对font-size的控制(并非原创)
假设根字体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的控制(并非原创)的更多相关文章
- 学习web前端技术的笔记,仅供自己查阅备忘,图片上传预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 经验分享:如何系统学习 Web 前端技术?
这篇文章主要是面向小白用户的,如果你有些基础,当然也建议你看看,尤其是最后一个主题,或许你能得到一些启发.本文的观点,纯属个人自以为是的想法,不是真理,仅供参考. 抛开具体技术细节,先主要谈谈程序员如 ...
- 开始学习web前端技术
不能再蹉跎了,不能再徘徊了,不能再犹豫了,犹豫徘徊等于白来…… 感觉之前浪费了太多的岁月,必须得学习一门实用的技术来充实自己空虚的心情了. 想来想去网页应该是万金油的,大大小小多多少少都得用到.既然如 ...
- 绝版珍珍藏:web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- 学习Web前端开发时有哪些技术点
现在学前端的人是越来越多,学习质量也是参差不齐.过来人的身份告诉你,如果你还没有下定决心花时间去学习Web前端,那也可以先找些视频学习下,Web前端开发有哪些常见技术点!接下来,就看看Web前端开发有 ...
- 独家分享——大牛教你如何学习Web前端开发
2014-12-18 14:35:42 引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上 ...
- 最受欢迎web前端技术总结
Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...
- web前端安全---读书笔记
web前端安全---读书笔记 粗略的看完了Web前端黑客技术揭秘前两章了,由于自身的前端功力不深,当然也是初涉前端的安全问题,所以实话还是有些问题看不太明白的.在豆瓣看到的这本书,名字真心有点很肥主流 ...
- 零基础如何迅速学习HTML5?新手小白学习web前端H5自白!
很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...
随机推荐
- 对Spring与SpringMVC的理解
Spring 在我的Spring --简介及环境搭建跑通Hello提到关于Spring的基本结构与功能 SpringMVC 先上一张SpringMVC的流程图 Spring MVC 是一个模型 - 视 ...
- 【Netty】源码分析目录
前言 为方便系统的学习Netty,特整理文章目录如下. [Netty]第一个Netty应用 [Netty]Netty核心组件介绍 [Netty]Netty传输 [Netty]Netty之ByteBuf ...
- 手动安装cloudera manager 5.x(tar包方式)详解
官方共给出了3中安装方式:第一种方法必须要求所有机器都能连网,由于最近各种国外的网站被墙的厉害,我尝试了几次各种超时错误,巨耽误时间不说,一旦失败,重装非常痛苦.第二种方法下载很多包.第三种方法对系统 ...
- 解决MAVEN项目因achetype加载太慢的问题
解决方案: 加载太慢由于achetype-catalog.xml文件的访问问题,导致了整个构建过程的缓慢,所以是否能够将文件保存到本地,成为一种解决思路.翻阅Maven官方文档可以找到,确实是可以的. ...
- 微信公众号H5支付遇到的那些坑
简史 官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...
- Nifi自定义processor
有关nifi的基本介绍和架构可以参考nifi官网 一下介绍nifi的一些比较重要的类和自己的一些理解,我刚刚接触nifi: nifi的数据流可以表示为一个flow这是一个队列,每个数据包被封装在flo ...
- [ZJOI2015]地震后的幻想乡
题目传送门 SOL:不会积分的我瑟瑟发抖. 所以我选择状压DP. 我们有以下一个dp状态: f[S][i],S表示点集,i表示这个点集向外联了i条边. 那么答案就是f[(1<<n)-1][ ...
- thinkinginjava学习笔记10_容器
Java中并没有像Perl.Python.Ruby那样对容器有直接的支持,但是可以依靠容器类来完成相同的工作: 泛型 使用一个ArrayList对象可以保存一系列的对象,如: ArrayList ap ...
- Head First设计模式之策略模式
这是学习的第一个设计模式,而书中写的实例相对比较复杂,参考了网上的文章进行总结 一.定义 策略模式(strategy pattern): 定义了算法族, 分别封闭起来, 让它们之间可以互相替换, 此模 ...
- python模块安装报错 :error: command 'gcc' failed with exit status 1
参考:http://blog.csdn.net/fenglifeng1987/article/details/38057193 解决方法 yum install gcc libffi-devel py ...