当前位置: 首页 > 编程日记 > 正文

rem自适应js

Rem自适应js---flexible.min.js

网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~

由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不用再为各种设备宽度不同而烦恼如何实现自适应的问题。

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则1rem=64px来运算。

阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

在这里找到了一个精简版的flexible.min.js,可以适配所有的移动端:

代码如下:

//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
;(function(designWidth, maxWidth) {var doc = document,win = window,docEl = doc.documentElement,remStyle = document.createElement("style"),tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;maxWidth = maxWidth || 540;width>maxWidth && (width=maxWidth);var rem = width * 100 / designWidth;remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(remStyle);} else {var wrap = doc.createElement("div");wrap.appendChild(remStyle);doc.write(wrap.innerHTML);wrap = null;}//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
    refreshRem();win.addEventListener("resize", function() {clearTimeout(tid); //防止执行两次tid = setTimeout(refreshRem, 300);}, false);win.addEventListener("pageshow", function(e) {if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === "complete") {doc.body.style.fontSize = "16px";} else {doc.addEventListener("DOMContentLoaded", function(e) {doc.body.style.fontSize = "16px";}, false);}
})(750, 750);

使用方法:·

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小,调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素,例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。

上面的代码,如果在uc浏览器下横屏与竖屏转换,发现代码并没有自适应,则通过下面进行解决bug:

已经找到兼容方案,可通过js在页面的head里生成定义了html元素font-size的style元素来解决!
如下:<style id="rootFontSize">html{font-size: 100px !important;}</style>
注意还加了important来提高权重

该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。·

假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}

基本的HTML模板·

你也可以直接复制下面这个基础的HTML模板。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>前端开发博客</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
//引入该flexible.min.js
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
</head><body><!-- 正文 -->
</body>
</html>

base.css:

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:14px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

再次强调一下:·

需要根据你的设计稿的大小来调整脚本最后的两个参数。

})(750, 750);
  • 第一个参数是设计稿的宽度,一般设计稿有640,或者是750,你可以根据实际调整
  • 第二个参数则是设置制作稿的最大宽度,超过750,则以750为最大限制。


【推荐文章】

rem与em的介绍:https://www.imooc.com/article/15239

rem自适应布局:http://caibaojian.com/flexible-js.html

http://caibaojian.com/simple-flexible.html

rem实现手淘:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

内容转自:https://www.cnblogs.com/Mrs-pao/p/7932207.html

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/10483360.html

相关文章:

设计模式 之美 -- 建造者模式

文章目录1. 解决问题2. 应用场景3. 实现C语言实现C实现4. 缺点1. 解决问题 描述如下场景&#xff1a; 类的数据成员很多&#xff08;8个以上&#xff09;&#xff0c;当我们进行初始化的时候放在初始化列表中&#xff0c;影响类的可读性&#xff0c;同时校验初始化参数列表是…

dateformat java 并发_java.text.DateFormat 多线程并发问题

在日常开发中&#xff0c;java.text.DateFormat 应该算是使用频率比较高的一个工具类&#xff0c;经常会使用它 将 Date 对象转换成字符串日期&#xff0c;或者将字符串日期转化成 Date 对象。先来看一段眼熟的代码&#xff1a;类 DateUtils 的方法 formatForDay() 在多线程的情…

每天一个摆脱if-else工程师的技巧——优雅的参数校验

在日常的开发工作中,为了程序的健壮性,大部分方法都需要进行入参数据校验。最直接的当然是在相应方法内对数据进行手动校验,但是这样代码里就会有很多冗余繁琐的if-else。throw new IllegalArgumentException("用户姓名不能为空");throw new IllegalArgumentException("性别不能为空");throw new IllegalArgumentException("性别错误");

我下载的最新的linux ADT+eclipse中没有NDK

问题描述我下载的是 adt-bundle-linux-x86_64-20140702.zip 这个版本。我已经安装了CDT了&#xff0c;但是还是没有NDK可以设置&#xff0c;而且在project右键android tools下 没有Add Native Support这个选项求指教&#xff0c;谢谢&#xff01; 解决方案1你的Eclipse插件好…

Android中去掉标题的方法总结

方法一&#xff1a;也一般入门的时候经常使用的一种方法在setContentView()方法的前面插入代码&#xff1a; requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 package com.example.helloword;import android.os.Bundle; import android.app.Activity; import and…

ImportError: No localization support for language ‘eng’ in python

ImportError: No localization support for language ‘eng’ in python 遇到這一個問題&#xff0c;是因為有缺少檔案&#xff0c;我是因為使用 pyinstaller 去包裝執行檔&#xff0c;所以需要手動加入這一個設定值進 .spec 檔案裡&#xff1a; hiddenimports[mysql,mysql.con…

C++ 智能指针(unique_ptr / shared_ptr)代码实现

文章目录unique_ptr 智能指针的实现shared_ptr 智能指针的实现指针类型转换unique_ptr 智能指针的实现 一个对象只能被单个unique_ptr 所拥有。 #include <iostream>using namespace std;/*增加模板类型&#xff0c;保证智能指针的类型是由传入的类型决定的*/ template…

winform实现截图

这个截图模仿QQ截图&#xff0c;左键单击开始截图&#xff0c;鼠标移动出现方框确定截图尺寸&#xff0c;放开时为最终尺寸&#xff0c;双击鼠标弹出保存对话框进行保存。 还有一点就是&#xff0c;如果截图尺寸方框已经确定&#xff0c;移动鼠标到所选区域内时&#xff0c;鼠标…

java interface list_你了解注解内的@interface List么

Annotation, Multi-valued annotation, nested annotation, 多值注解, 嵌套注解今天在研究Spring MVC的Validation机制时(这里 | 还有这里)&#xff0c;简单看了下一些注解的源码&#xff0c;比如Min&#xff0c;发现以前从来没注意到的注解写法。看来基础知识有疏漏啊.../*** …

Struts 2的输入校验(一)

9 Struts 2的输入校验输入校验有两种&#xff1a;客户端和服务器端校验。客户端校验一般是通过JavaScript来完成&#xff0c;这种校验可减轻服务器压力。服务器校验主要通过服务器端编程的方式来完成。(1) 客户端校验客户端校验一般是通过JavaScript来完成&#xff0c;这种校验…

通过document.domain实现跨域访问

通过document.domain实现跨域访问&#xff1a;https://blog.csdn.net/nlznlz/article/details/79506655 前端跨域方法之document.domain和location.hash&#xff1a;https://blog.csdn.net/WEB_YH/article/details/79364565 转载于:https://www.cnblogs.com/bydzhangxiaowei/p/…

设计模式 之美 -- 原型模式

文章目录1. 解决问题2. 应用场景3. 实现方式C实现C语言实现4. 缺点5. 和其他三种创建模式的对比&#xff08;单例&#xff0c;工厂&#xff0c;建造者&#xff09;1. 解决问题 如果对象的创建成本较大&#xff0c;而同一个类的不同对象之间的差别不大&#xff08;大部分字段相…

Objective-C语法简记

开始学习iPhone开发了&#xff0c;虽然现在已经有了Swift&#xff0c;但我还是老老实实地学习Objective-C&#xff0c;鄙人入门的程序语言是C&#xff0c;后来学习了C#和Java&#xff0c;现在来学Objective-C&#xff0c;这篇只是一些很简略的笔记&#xff0c;不算是语法书。 代…

java编写最大公约数_Java编写最大公约数和最小公倍数

package javaapplication24;class NegativeIntegerException extends Exception{String message;public NegativeIntegerException(){message"方法的参数值不是正整数";}public String toString(){return message;}}class MaxCommonDivisor{public int getMaxCommonD…

肤色检测算法 - 基于不同颜色空间简单区域划分的皮肤检测算法

由于能力有限&#xff0c;算法层面的东西自己去创新的很少&#xff0c;很多都是从现有的论文中学习&#xff0c;然后实践的。 本文涉及的很多算法&#xff0c;在网络上也有不少同类型的文章&#xff0c;但是肯定的一点就是&#xff0c;很多都是不配代码的&#xff0c;或者所附带…

【算法学习】堆排序建立最大堆

本文代码均转自&#xff1a; 作者&#xff1a;早就戒了 来源&#xff1a;CSDN 原文&#xff1a;https://blog.csdn.net/qq_37169817/article/details/79777264 版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请附上博文链接&#xff01; 1 public class HeapSort { 2…

设计模式 之美 -- 代理模式

文章目录1. 解决问题2. 应用场景1. 业务系统的非功能性开发2. 代理模式在RPC、缓存中的应用3. 实现C实现C语言实现1. 解决问题 客户端和目标对象之间需要进行交互&#xff0c;此时客户端类和目标对象类相关操作之间的逻辑如果交合在一起&#xff0c;会导致客户端和目标对象模块…

java中注解的使用_java中注解的使用

使用过ssh框架的人一定也使用过注解&#xff0c;尤其是在spring框架中&#xff0c;注解可谓是spring容器和AOP编程的重要环节。注解就是用于修饰类、全局变量、方法、参数或局部变量的接口&#xff0c;java中规定&#xff0c;注解的使用不允许影响其修饰类的存在&#xff0c;也…

水题/poj 1852 Ants

1 /*2 PROBLEM:poj18523 AUTHER:Nicole4 MEMO:水题5 */6 #include<cstdio>7 using namespace std;8 int cmax(int a,int b){return a>b?a:b;}9 int cmin(int a,int b){return a<b?a:b;} 10 int main() 11 { 12 int cases; 13 scanf("%d…

素数、最大公约数、最下公倍数、质因数分解

2013-08-18 11:20:43 素数、最大公约数、最下公倍数、质因数分解都是与素数相关的&#xff0c;解决了素数的问题&#xff0c;其他的都可以此为基础求解。 小结&#xff1a; 求1到n之间的素数的基本方法是通过遍历2到sqrt(n)&#xff0c;判断每个数是否是素数来得到&#xff0c;…

Spring注解 开发

转载于:https://www.cnblogs.com/JBLi/p/10489541.html

读书:个人成长 -- 即兴演讲

与人交流时&#xff0c;有人发言语无伦次&#xff0c;舌头像打了结。 有人一开讲便滔滔不绝&#xff0c;却毫无重点。 也有人说话索然无味&#xff0c;没法让你投以关注。 如何在任何场合游刃有余地表达&#xff1f; 如何掌控此时此刻&#xff0c;用说话影响他人&#xff1f; …

php mysql环境搭配_centos6.7下搭配apache php mysql环境

安装过程安装apacheapache默认端口为80, 而nginx默认端口也是80, 所以安装apache前, 检查是否安装了nginx, 确保80端口没有被占用, 然后执行以下命令安装apacheyum install httpd httpd-devel启动apache服务/etc/init.d/httpd start或service httpd start停止apache服务/etc/in…

我们如此努力,也不过是个普通人

http://www.nowamagic.net/librarys/eight/posts/2500文 / 張君雅 南方日报曾刊登了一条新闻&#xff0c;大意是说有个女孩子以她的成绩考入北大清华没问题。但她从小参加各种社会活动&#xff0c;深受曾留学法国的母亲“生命的意义在于体验最多而不是最好”影响&#xff0c;决…

Citrix XenServer@cloudstack基本功能测试报告2

Cloudstack功能测试1、创建Zone、Pod、Clusters&#xff0c;添加hosts、Primary Storage、Secondary Storage步骤&#xff1a;1、 登录cloudstack控制板2、 选择基础架构&#xff0c;选择区域&#xff0c;点击查看全部&#xff0c;然后点击添加区域3、 选择基本区域类型4、 输入…

ABP中的Filter(下)

接着上面的一个部分来叙述&#xff0c;这一篇我们来重点看ABP中的AbpUowActionFilter、AbpExceptionFilter、AbpResultFilter这三个部分也是按照之前的思路来一个个介绍&#xff0c;当然这里面如果和前面的Interceptor有重复的部分&#xff0c;那么将会对两者进行一个对比并作出…

LRU算法 -- 链表 完整实现

LRU算法(Least Recently Used) 算是我们经常遇到的一种淘汰算法&#xff0c;其中内存管理模块进行内存页回收时有用到&#xff0c;针对不经常使用的内存页&#xff0c;LRU淘汰策略能够将该内存页回收给操作系统。 属于 我们操作系统设计中的 时间局部性原理&#xff0c;最长时…

python getostime_python中sys,os,time模块的使用(包括时间格式的各种转换)

sys模块sys.argv: 实现从程序外部向程序传递参数。位置参数argv[0]代表py文件本身&#xff0c;运行方法 python xx.py 参数1&#xff0c;参数2 。。self sys.argv[0]name sys.argv[1]age sys.argv[2]print self, name, agesys.getdefaultencoding(): 获取系统当前编码&#…

关于SpringMVC和Struts2的区别

1. 与struts2不同 1、 springmvc的入口是一个servlet即前端控制器&#xff0c;而struts2入口是一个filter过虑器。 2、 springmvc是基于方法开发&#xff0c;传递参数是通过方法形参&#xff0c;可以设计为单例或多例(建议单例)&#xff0c;struts2是基于类开发&#xff0c…

DC-RC加固修补型砂浆

DC-RC加固修补型砂浆www.hrbjg.net一、DC-RC加固修补型砂浆的产品特点&#xff1a;1、耐火、耐高温、耐腐蚀、耐老化性能优良。2、强度高&#xff0c;抹灰操作性好。3、与原混凝土结构的粘结性能良好。4、无收缩&#xff0c;基本不会产生裂缝。5、二氧化碳、氯化物等透过性差&a…