//author:caibaojian
//website:http://caibaojian.com
//weibo:http:weibo.com/kujian
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)         (此代码根节点为100px,设计稿最大宽度和屏幕宽度为750)
!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);

rem布局,flexible.js的更多相关文章

  1. flexible.js

    关于rem小数点 flexible.js http://blog.163.com/hongshaoguoguo@126/blog/static/180469812015219101346170/ ht ...

  2. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  3. flexible.js结合rem实现移动端自适应布局

    1. 配置开发工具(sublime)插件      https://github.com/flashlizi/cssrem     注意: 只有在‘.css’后缀文件才能使用此插件功能   2. 在h ...

  4. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  5. flexible.js + makegrid.js 自适应布局

    一,flexible.js 的使用方式: (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3. ...

  6. 移动端自适应:flexible.js可伸缩布局使用

    http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...

  7. vue 的rem 配置和flexible.js的应用

    1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...

  8. flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  9. vue2.0 flexible.js + rem 进行自适应开发

    1.在页面中引入flexible.js base.js /** * flexible.js 阿里前端自适应解决方案 */ ;(function(win, lib) { var doc = win.do ...

  10. 转载:移动端自适应:flexible.js可伸缩布局使用

    阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这 ...

随机推荐

  1. 【内网渗透笔记】Windows2008 R2搭建域控制器

    0x00 前言 将网络中的多台计算机逻辑上组织到一起,进行集中管理,这种区别于工作组的逻辑环境叫做域(domain).域是日常计算机管理的一种很有效手段,因此,域控制器自然而然就在成域环境中最重要的角 ...

  2. Bypass D盾_IIS防火墙SQL注入防御(多姿势)

    0X01 前言 D盾_IIS防火墙,目前只支持Win2003服务器,前阵子看见官方博客说D盾新版将近期推出,相信功能会更强大,这边分享一下之前的SQL注入防御的测试情况.D盾_IIS防火墙注入防御策略 ...

  3. Python爬虫学习笔记-2.Requests库

    Requests是Python的一个优雅而简单的HTTP库,它比Pyhton内置的urllib库,更加强大. 0X01 基本使用 安装 Requests,只要在你的终端中运行这个简单命令即可: pip ...

  4. Kafka(二)-- 安装配置

    一.单机部署 1.下载kafka,可在apache官网上下载,kafka要和JDK版本对应,我使用的是JDK1.7,kafka为0.10 2.进入到 /usr/java 中,解压到 此文件夹中 tar ...

  5. Kafka一些常见资源汇总

    终于下定决心写一点普及类的东西.很多同学对Kafka的使用很感兴趣.如果你想参与到Kafka的项目开发中,很多资源是你必须要提前准备好的.本文罗列了一些常用的Kafka资源,希望对这些develope ...

  6. PS合成以及分解GIF

    http://jingyan.baidu.com/article/3052f5a1c91f0497f31f862a.html 百度上的这个说明很详细了 这里就简单注明一下: PS 时间轴:用来创建动画 ...

  7. 非IMU模式下DML语句产生的REDO日志内容格式解读

    实验内容:非IMU模式下DML语句产生的REDO日志内容格式解读 最详细的解读是UPDATE的. 实验环境准备 11G中默认是开启IMU特性的,做此实验需要关闭此特性. alter system se ...

  8. Elasticsearch学习之ElasticSearch 5.0.0 安装部署常见错误或问题

    ElasticSearch 5.0.0 安装部署常见错误或问题 问题一: [--06T16::,][WARN ][o.e.b.JNANatives ] unable to install syscal ...

  9. TX大手笔做业务必然失败的原因

    首先说一个伪命题: 物体会向下落这是一个基本的定律,一个小小的物理规则会覆盖所有物体的行为准则. 那么,当地球上的所有东西都下落的时候,你指望整个地球,月球,太阳也会下落么? 事实上大家都知道星球在宇 ...

  10. locate命令的使用

    使用locate命令,遇到了这样的情况:当前目录下有一个文件,而使用这个命令时却查找不到这个文件,上网查了一下,找到了原因,就在下面. 1. find find是最常见和最强大的查找命令,你可以用它找 ...