//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. Discuz!X 3.4 任意文件删除漏洞复现过程(附python脚本)

    今天看下群里在讨论Discuz!X 3.4 任意文件删除漏洞,自己做了一些测试,记录一下过程.结尾附上自己编写的python脚本,自动化实现任意文件删除. 具体漏洞,请查看 https://paper ...

  2. springboot 集成elasticsearch5.4.3

    官网上对elasticsearch 的集成用的是spring-data,而且,暂时不支持5.x的版本, 要是想集成5.x的版本,我们只能在pom.xml文件中进行修改,如图: <project ...

  3. JQuery选择器和DOM的操作-入门学习

    嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...

  4. Xshell 5 免费版本安装过程

    发现本机的Xshell 5过期了用不了.在百度里搜索,下载安装后还是不可以使用.需要购买注册,后寻的一方法,分享给大家. 1.官网 进入官网,然后点击Download下方的Free License菜单 ...

  5. thinkphp3.2 实现留言功能

    写一个例子说明一下: 前端:http://www.mmkb.com/zhendao/index/feedback.html <form method="post" actio ...

  6. LESS CSS 框架简介与使用

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  7. 傲游浏览器---自定义 UserAgent 字符串

    遨游浏览器:http://www.maxthon.cn/ 自定义 UserAgent : http://www.fynas.com/ua  手机UserAgent大全 设备 系统 浏览器 User-A ...

  8. Elasticsearch学习之深入聚合分析一---基本概念

    首先明白两个核心概念:bucket和metric 1. bucket:一个数据分组 city name 北京 小李 北京 小王 上海 小张 上海 小丽 上海 小陈 基于city划分buckets,划分 ...

  9. kafka 的quick start(windows平台)

    h1, h2, h3, h4, h5, h6, p, blockquote { margin: 5px; padding: 5; } body { font-family: "Helveti ...

  10. PostgreSQL索引介绍

    h1, h2, h3, h4, h5, h6, p, blockquote { margin: 5px; padding: 5; } body { font-family: "Helveti ...