//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. iOS开发--UIButton 设置圆角 边框颜色 点击回调方法

    UIButton *signBtn = [UIButton buttonWithType:UIButtonTypeCustom]; signBtn.frame = CGRectMake(, , , ) ...

  2. Linux 常用文件

    /etc/exports /etc/services /etc/sysctl.conf /etc/logrotate.conf /etc/docker/key.json /etc/docker/dae ...

  3. Python迭代器笔记

    python中的三大器有迭代器,生成器,装饰器,本文重点讲解下迭代器的概念,使用,自定义迭代器等的介绍. 1.概念: 迭代器是一个对象,一个可以记住遍历位置的对象,迭代器对象从集合的第一个元素开始访问 ...

  4. windowsError错误码详解

    WindowsError的错误代码详解 0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. 4系统无法打开文件. 5拒绝访问. 6句柄无效. 7存储控制块被损坏. 8存 ...

  5. RabbitMQ备份交换器

    备份交换器,AlternateExchange(AE): 备份交换器是为了实现没有路由到队列的消息,与上篇介绍到的mandatory都是为了处理没有路由到的消息. AE相对于mandatory逻辑更简 ...

  6. Android M App休眠 (adb shell dumpsys usagestats)

    App休眠 在 Marshmallow 系统,Google 宣布了一个新的功能叫 App 休眠.App 休眠会阻止那些不 常用的 App(几天没有用过的 App)连接网络或者是运行任何程序直至设备充电 ...

  7. sencha touch NavigationView

    NavigationView 是官方根据Container控件扩展而来的,由一个导航栏和一个card组成,具备导航和返回时自动销毁当前界面的功能,非常适合新手使用. 其中导航栏的代码如下: Ext.d ...

  8. hdu3507 Print Article[斜率优化dp入门题]

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  9. 如何分离p12(或pfx)文件中的证书和私钥

    p12(或者pfx)文件里一般存放有CA的根证书,用户证书和用户的私钥 假设我们有一个test.p12文件 在安装了openssl的linux服务器上执行以下命令: 提取用户证书: openssl p ...

  10. 【BZOJ3774】最优选择 最小割

    [BZOJ3774]最优选择 Description 小N手上有一个N*M的方格图,控制某一个点要付出Aij的代价,然后某个点如果被控制了,或者他周围的所有点(上下左右)都被控制了,那么他就算是被选择 ...