移动端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,所以 ...
随机推荐
- Mac入门--Apache/Php/Mysql的开启关闭
注意:mac自带apache环境和PHP环境 一 php服务的启动和关闭 php-fpm 启动 sudo php-fpm php-fpm 关闭 1 查看php-fpm端口是否在被php-fpm进程 n ...
- Python3的基本数据类型
2.1. Python3中六个标准的基本数据类型: Number(数字) String(字符串) Sets(集合) Tuple(元组) List(列表) Dictionary(字典) 2.2. Pyt ...
- 时间、金钱在java、数据库中的变量类型之总结
在编写程序时,总是有些变量的类型搞不很明白,现将目前涉及到的变量总结一下: 1.“时间”类型 (1).在数据库中的变量类型是:DateTime 比如: operateTime DATETIME,//数 ...
- Java中的容器(集合)
1.Java常用容器:List,Set,Map List: 继承了Collection接口(public interface List<E> extends Collection<E ...
- [BNDSOJ] #1106代码
#include<bits/stdc++.h> using namespace std; ]; ][]; int n; bool check(int i,int j) { ]==]==]= ...
- wxpython模板程序,包括各个实例
#coding=utf-8 import wx import time import os class MyApp(wx.App): def __init__(self): wx.App.__init ...
- 把int 类型转化为varchar并且去掉小数点同时以千分号‘,’分割
把int 类型转化为money 类型,再转化为varchar,去掉小数点同时以千分号‘,’分割. select '$' + left(Convert(VARCHAR, cast(10000 as mo ...
- .linux基础命令三
一. 两台服务器免密登录: 1. 生成密钥 ssh-keygen的命令手册,通过”man ssh-keygen“命令查看指令: 通过命令”ssh-keygen -t rsa“创建一对密匙,包括公匙和私 ...
- js中的回调地狱 Callback to Hell
本文重点:解决方式:1.promise 2. 拆解 function:将各步拆解为单个的 function 3. 通过 Generator 函数暂停执行的效果方式 4. 通过ES8的异步函 ...
- Codeforces Round #425 (Div. 2) - D
题目链接:http://codeforces.com/contest/832/problem/D 题意:给定一棵n个点的树,然后给你q个询问,每个询问为三元组(a,b,c),问你从这三个点中选取一个作 ...