//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. VS2017编译Poco1.9.0的64版本

    需要先准备好OpenSSL1.0.2 下载poco-poco-1.9.0-release.zip,解压,修改buildwin.cmd中的OPENSSL_DIR路径,特别注意OPENSSL_LIB的路径 ...

  2. Android Studio 出现 Gradle's dependency cache may be corrupt 解决方案

    将 .\项目地址\gradle\wrapper\gradle-wrapper.properties 文件中的 gradle版本 与 正常的版本 修改一致即可.

  3. linux Tar 命令参数详解

    tar命令 . 作用 tar命令是Unix/Linux系统中备份文件的可靠方法,几乎可以工作于任何环境中,它的使用权限是所有用户. . 格式 tar [主选项+辅选项] 文件或目录 eg: tar z ...

  4. Android开发训练之第五章第三节——Transferring Data Without Draining the Battery

    Transferring Data Without Draining the Battery GET STARTED DEPENDENCIES AND PREREQUISITES Android 2. ...

  5. SeaJS之use函数

    有了 define 等模块定义规范的实现,我们可以开发出很多模块.但光有一堆模块不管用,我们还得让它们能跑起来.在 SeaJS 里,要启动模块系统很简单: <script src=”path/t ...

  6. java框架---->lucene的使用(一)

    Lucene是一个全文检索的框架,apache组织提供了一个用Java实现的全文搜索引擎的开源项目.这里我们对apache的lucene的框架做一个简单的介绍.心甘情愿这四个字,透着一股卑微,但也有藏 ...

  7. html2canvas - 微信中长按存图 - 将h5活动结果保存到本地

    现在有很多在微信里流行的h5活动页.这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答案.比如这个就是最后那张结果图: 当时自己 ...

  8. Android.mk(4) 依赖:目标编程的模式

    https://www.jianshu.com/p/3777a585a8d0 另一种范式 我一直觉得,Makefile确实是C/C++程序员的良配,因为Makefile所使用的两种范式都是C/C++程 ...

  9. EXCEL通俗易懂讲公式(一):sumif,sumifs,countif,countifs

    最近公司招了一批新人,excel基本都是小白阶段,以前用过的也就是画个课程表,没做过什么数据统计和文本计算等工作.因此各种问题都来了,什么vlookup,offset,连条件求和的sumif也不会用, ...

  10. LeetCode 41 First Missing Positive(找到数组中第一个丢失的正数)

    题目链接: https://leetcode.com/problems/first-missing-positive/?tab=Description   给出一个未排序的数组,求出第一个丢失的正数. ...