2018-07-13 admin


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


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


This content is released under the MIT License.


转载请注明:文章转载自 JavaScript中文网 []



背景 现在工作中有超过一半的时间用于移动端项目的开发,包括app嵌入页,微信页面和移动wap页。 开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布局的要求更高,不能像PC页面一样设计几个断点利用媒体查询,两边留空白就解决。移动端...
Removing all properties from a object
Anders Östman提出了一个问题:Removing all properties from a object,或许与您遇到的问题类似。 回答者ClydeVisioN给出了该问题的处理方式: Simply assign an empt...
MattJapboy提出了一个问题:How to removeEventListener that is addEventListener with anonymous function?,或许与您遇到的问题类似。 回答者Felix Kli...
【基础】EM 还是 REM?这是一个问题!
简言 应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。 但问题是究竟该用 EM 还是 R...
remark是什么 什么是remark,A simple, in-browser, markdown-driven slideshow tool remark官网:官网 remark文档:文档 remark源码仓库:源码仓库 remark...
remodal是什么 什么是remodal,Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window p...
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好,...
When to use remote vs ipcRenderer, ipcMain
user1513388提出了一个问题:When to use remote vs ipcRenderer, ipcMain,或许与您遇到的问题类似。 回答者ccnokes给出了该问题的处理方式: From the remote docs: ...
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?,或许与您遇...
H5 页面 rem 布局适配方法
主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小; css 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 为单位的值; 设计稿中的字体使用 px 为单位,通过媒...