/*
  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中便可使用)的更多相关文章

  1. 移动端rem布局的适配mixin【转藏】

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

  2. 分享一个移动端rem布局的适配mixin

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

  3. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  4. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  5. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  6. 第132天:移动web端-rem布局(进阶)

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  7. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  8. 关于移动端rem 布局的一些总结

    1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...

  9. 移动端rem布局实现(vw)

    什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...

随机推荐

  1. django中orm多表查询,减少数据库查询操作

    .select_related()   的使用

  2. hacker101教学笔记--introduction--the web in depth

    hacker101笔记 提前准备:运行java的环境 burp proxy(代理) firefox(浏览器) xss 可以控制参数,发送JavaScript到服务器,再从服务器反映到浏览器上面< ...

  3. 视频格式转换.ZC资料

    1.20191013: ZC:这些都是 2015年做的尝试,之前貌似没有记录下来,现在 再次用到,把用到的记录下来: ZC: (1) 使用的视频格式转换工具是 "??/XiGua Yings ...

  4. linux启动内核源码分析

    内核的启动时从main.c这个文件里面的start_kernel函数开始的,这个文件在linux源码里面的init文件夹下面 下面我们来看看这个函数 这个函数很长,可以看个大概过去 asmlinkag ...

  5. pytony格式化输出-占位符

    1. %s s = string 字符串 2. %d d = digit 整数 3. %f f = float 浮点数 #!/usr/bin/env python #_*_coding:utf-8_* ...

  6. [Python3 练习] 006 汉诺塔2 非递归解法

    题目:汉诺塔 II 接上一篇 [Python3 练习] 005 汉诺塔1 递归解法 这次不使用递归 不限定层数 (1) 解决方式 利用"二进制" (2) 具体说明 统一起见 我把左 ...

  7. centos7下安装iperf时出现 make: *** No targets specified and no makefile found. Stop.的解决方案

    我们在Linux 安装包的时候,使用make 命令出现:"make:*** No targets specified and no makefile found.Stop."这样的 ...

  8. django shell的基本使用

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke/ 在日常工作再发中,经常需要测试一些对象.函数.类...等是否正确,但是如果整体运行项目特别麻烦,并且 ...

  9. SpringBoot(四) -- SpringBoot与Web开发

    一.发开前准备 1.创建一个SpringBoot应用,引入我们需要的模块 2.SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定少量配置,就能运行起来 3.编写业务代码 二.静态资 ...

  10. JDK11 | 第四篇 : 增强API

    文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/O0xntC-JfeSBk-9x2QfwnA 一.简介 JDK 9~11 在语言语法方面有一 ...