rem的js
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
;(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
rem的js的更多相关文章
- 彻底搞好rem 与js的监控
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
- rem自适应js
Rem自适应js---flexible.min.js 网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- 动态计算rem的js代码
以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...
- rem布局js实现
(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...
- 移动端rem布局 js
// rem布局适配 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in ...
- Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- rem布局js设置,设置网页文档参考字体闭包函数
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...
- rem 响应 js函数
size();window.onresize = function(){ size();}function size(){ var htnl_o=document.getElementsByTagNa ...
随机推荐
- git 利用分支概念实现一个仓库管理两个项目
需求描述:开发了一个网站,上线之际,突然另一个客户说也想要个一样的网站,但网站的logo和内部展示图片需要替换一下,也就是说大部分的后台业务逻辑代码都是一致的,以后升级时功能也要保持一致:刚开始想反正 ...
- Java基础语法(一)<注释,关键字,常量,变量,数据类型,标识符,数据类型转换>
从今天开始,记录学习Java的过程.要学习Java首先得有环境,至于环境的安装我就不说了,百度有很多教程,比如:http://jingyan.baidu.com/article/20095761904 ...
- Java提高(一)---- HashMap
阅读博客 1, java提高篇(二三)-----HashMap 这一篇由chenssy发表于2014年1月,是根据JDK1.6的源码讲的. 2,Java类集框架之HashMap(JDK1.8)源码剖析 ...
- 极光的开源礼物「Aurora IMUI」
今日,奉上我们拙作,仅为开源世界献出绵薄之力. Aurora IMUI,一个通用的即时通讯(IM)UI 库.不局限于任何 IM SDK. 本 UI 库提供了消息列表.输入视图等常用组件. 初心 过去的 ...
- MySQL事件调度器event的使用
Q:假设,有一个需求,希望在某一个时刻系统调用一个begin end执行一下:十分钟以后执行一下begin end.亦或有一个需求,每个多长时间周期性执行begin end.那么这个时候该怎么办呢? ...
- O(mn)实现LCIS
序: LCIS即求两序列的最长公共不下降子序列.思路于LCS基本一致. 用dp[i][j]记录当前最大值. 代码实现: /* About: LCIS O(mn) Auther: kongse_qi D ...
- vue-router2.x
组件中的路由 <router-link to=""></router-link> 无参数 <router-link to="/ar/1&qu ...
- [刷题]算法竞赛入门经典 3-7/UVa1368 3-8/UVa202 3-9/UVa10340
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 都是<算法竞赛入门经典(第二版)>的题目,标题上没写(第二版) 题目:算法竞赛入门经典 3-7/UVa13 ...
- jQuery操作之效果
jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...
- 远程登录aws
AWS的EC2服务器是用密钥来认证的,在创建instance时,会提示,创建一个key pair,同时会提示下载一个xxx.pem的密钥文件到本地硬盘.下面是通过SecureCRT连接到EC2的操作步 ...