移动端rem布局屏幕适配插件(放js中便可使用)
/*
doc:不用管:document对象
win:不用管:window对象
design:注意:设计稿的尺寸/物理像素
*/
(function (doc, win,design) {
// alert(123)
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>design){
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
else if(clientWidth==design){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,375);
/*
window.onload = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
};
*/
移动端rem布局屏幕适配插件(放js中便可使用)的更多相关文章
- 移动端rem布局的适配mixin【转藏】
/*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...
- 分享一个移动端rem布局的适配mixin
/*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
- 关于移动端rem 布局的一些总结
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
- 移动端rem布局实现(vw)
什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...
随机推荐
- mssql 堆叠注入
添加用户 exec master.dbo.xp_cmdshell 'net user leeww 123456 /add' 提升权限 exec master.dbo.xp_cmdshell 'net ...
- 存储过程SET XACT_ABORT ON
设置事务回滚的当为ON时,如果你存储中的某个地方出了问题,整个事务中的语句都会回滚为OFF时,只回滚错误的地方
- git比较重要但是又容易忘记的操作
git rebase head~1 把多次commit合并成一次 git reset head 撤销已缓存的内容 git checkout . git stash 去除改动未提交的代码
- 13 (H5*) JS第三天 数组、函数
目录 1:数组的定义和创建方式 2:数组的总结 3:for循环遍历数组 4:数组的案例 5:冒泡排序 6:函数的定义 7:函数的参数 8:函数的返回值 复习 <script> /* * * ...
- C++学习笔记(六)--结构体
1.一种自定义的类型--结构体定义: struct 结构体名称 { //成员表列也称作域 还可以包括函数,即函数成员,不过一般结构体类型中不包含,而是放在类中. 类型名 成员名; };这种结构体类型类 ...
- shutdown的几种方法和利弊
1.shutdown normal 正常方式关闭数据库. 2.shutdown immediate 立即方式关闭数据库. 在SVRMGRL中执行shutdown imme ...
- java 注解 Annontation
什么是注解? 对于很多初次接触的开发者来说应该都有这个疑问?Annontation是Java5开始引入的新特征,中文名称叫注解.它提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metada ...
- mybatis-plus&springboot
** 问题1:mybatis 读取不到 mapper映射文件. 如下: ** 如果引用 mybatis-plus 包 <dependency> <groupId>com.bao ...
- LeetCode107. 二叉树的层次遍历 II
107. 二叉树的层次遍历 II 描述 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 示例 例如,给定二叉树: [3,9,20,null ...
- 搜索(BFS)---最短单词路径
最短单词路径 127. Word Ladder (Medium) Input: beginWord = "hit", endWord = "cog", word ...