手机端页面rem宽度自适应脚本


Posted in Javascript onMay 20, 2015

什么是rem

在我看来,rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的。

我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度)。

为什么这样搞?

这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及更好的体验。

扩展
因为是要计算rem的值,所以我们前端在看到设计图量尺寸的时候会去计算下这个东西,需要花费一些时间,所以我提供了Sass(不知道的自己去百度)和Less(不知道的自己去百度)相对变量的代码,

Sass相对变量地址:Sass相对变量

Less相对变量地址:Less相对变量

打开页面,1-400的相对变量都在上面,只需要全选复制,然后放入你的项目中,直接拿来用就是了,当然我写的css雪碧图生成工具也会用到里面的变量,大家不妨一试。

手机自适应代码

下面的代码是拷贝自淘宝的手机app,当然,我把有的变量还原了,有的注释了。

viewport标签

<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>

js代码

!function(win) {
 function resize() {
  var domWidth = domEle.getBoundingClientRect().width;
  if(domWidth / v > 540){
   domWidth = 540 * v;
  }
  win.rem = domWidth / 16;
  domEle.style.fontSize = win.rem + "px";
 }
 var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
 if (viewport) {
  //viewport:<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>
  var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
  if(o){
   initial_scale = parseFloat(o[2]);
   v = parseInt(1 / initial_scale);
  }
 } else {
  if (flexible) {
   var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
   if(o){
    v = parseFloat(o[2]);
    initial_scale = parseFloat((1 / v).toFixed(2))
   }
  }
 }
 if (!v && !initial_scale) {
  var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
  v = win.devicePixelRatio;
  v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
 }
 //没有viewport标签的情况下
 if (domEle.setAttribute("data-dpr", v), !viewport) {
  if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
   domEle.firstElementChild.appendChild(viewport)
  } else {
   var m = dom.createElement("div");
   m.appendChild(viewport), dom.write(m.innerHTML)
  }
 }
 win.dpr = v;
 win.addEventListener("resize", function() {
  clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
 }, false);
 win.addEventListener("pageshow", function(b) {
  b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
 }, false);
 /* 个人觉得没必要完成后就把body的字体设置为12
 "complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() {
  //dom.body.style.fontSize = 12 * v + "px"
 }, false);
 */
 resize();
}(window);

执行完代码后你的页面就会跟随手机的宽度而自适应了,根本就不用什么媒体查询那些,很简洁,很使用,站在巨人的肩膀上吧这就叫做!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jquery实现弹出层效果实例
May 19 #Javascript
jQuery结合ajax实现动态加载文本内容
May 19 #Javascript
jQuery实现在列表的首行添加数据
May 19 #Javascript
jQuery中 prop() attr()使用详解
May 19 #Javascript
javascript实现获取服务器时间
May 19 #Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 #Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 #Javascript
You might like
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
window.open的功能全解析
2006/10/10 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python正则-re的用法详解
2019/07/28 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Python random模块的使用示例
2020/10/10 Python
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
校园活动策划书范文
2014/01/10 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
法人委托书范本
2014/04/04 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
企业安全生产标语
2014/06/06 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫