rem

2018-07-13 admin

rem是什么

什么是rem,A polyfill to parse CSS links and rewrite pixel equivalents into head for non supporting browsers

rem介绍、rem使用

No fluff here. The polyfill will test any browser for REM support and patch it up if needed, although we all know IE8 and below is where the issue lies. Once lack of support is determined, it reads all the link tags for stylesheets and finds selectors that have rules using the REM unit. It then recalculates those rules to PX and writes them in the head to override in the cascade. Magic.

Special shout out to Lucas Serven for the first version and all the amazing RegEx that’s gone into this.

It has been tested on a large production publishing site and works great with minor performance differences.

We’re always open to suggestions and/or improvements, so please fork!

Getting Started

Using rem.js is a cinch; you can load the polyfill conditionally using a loader like yepnope or simply by including a reference to it in your page like so: <script src="js/rem.js" type="text/javascript"></script>. As a best practice, you should either reference rem.js after all of your stylesheets or, better yet, at the end of your <body> tag.

In some cases you may want the polyfill to skip some stylesheets; if that’s you then just add data-norem as an attribute to the link tags of the stylesheets to be ignored. There are a few reasons you may want to do this: if you are loading a crazy long stylesheet that you know doesn’t use REM units, then having the polyfill skip it will give your page a moderate speed boost and will help avoid a Flash of Unstyled Content; and if your page loads CSS from another domain that doesn’t have CORS enabled then you should tell the polyfill to ignore that CSS since it will not be able to load the stylesheet.

This repo includes a small example so you can bring up the polyfill in your browser to see how it works.

Install using Bower

bower install REM-unit-polyfill

License

This content is released under the MIT License.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35907.html

文章标题:rem

相关文章
Removing all properties from a object
Anders Östman提出了一个问题:Removing all properties from a object,或许与您遇到的问题类似。 回答者ClydeVisioN给出了该问题的处理方式: Simply assign an empt...
2018-04-14
【基础】EM 还是 REM?这是一个问题!
简言 应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。 但问题是究竟该用 EM 还是 R...
2018-04-20
H5 页面 rem 布局适配方法
主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小; css 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 为单位的值; 设计稿中的字体使用 px 为单位,通过媒...
2018-01-12
Rematch 一个更好用的 Redux
Why 这个项目起因是为了尝试一下rematch,它是一个基于 Redux 的状态管理框架,感觉跟 Vuex 有点相似,用以来比 Redux 简便很多,核心就是 model,dispatch 和 reducers,比 Redux 更好理...
2018-03-19
javascript用rem来做响应式开发
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好,...
2018-01-15
如何用removeEventListener,匿名函数注册侦听器?
MattJapboy提出了一个问题:How to removeEventListener that is addEventListener with anonymous function?,或许与您遇到的问题类似。 回答者Felix Kli...
2018-03-23
remark
remark是什么 什么是remark,A simple, in-browser, markdown-driven slideshow tool remark官网:官网 remark文档:文档 remark源码仓库:源码仓库 remark...
2018-05-20
前端移动端适配方案之rem之小白解惑
认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑...
2018-04-20
What are the reduceAdd, reduceSum , reduceRemove functions in crossfilter? How should they be used?
Navya R提出了一个问题:What are the reduceAdd, reduceSum , reduceRemove functions in crossfilter? How should they be used?,或许与您遇...
2018-04-22
When to use remote vs ipcRenderer, ipcMain
user1513388提出了一个问题:When to use remote vs ipcRenderer, ipcMain,或许与您遇到的问题类似。 回答者ccnokes给出了该问题的处理方式: From the remote docs: ...
2018-04-21
回到顶部