Respond.js-A fast &amp…
来源:互联网 发布:fbp算法源代码及注释 编辑:程序博客网 时间:2024/05/21 07:08
Usage Instructions
- Craft your CSS with min/max-width media queries to adapt yourlayout from mobile (first) all the way up to desktop
@media screen and (min-width: 480px){ ...styles for 480px and up go here }
Reference the respond.min.js script(1kb min/gzipped) after all of your CSS (the earlier it runs, thegreater chance IE users will not see a flash of un-media'dcontent)
Crack open Internet Explorer and pumpfists in delight
CDN/X-Domain Setup
Respond.js works by requesting a pristine copy of your CSS viaAJAX, so if you host your stylesheets on a CDN (or a subdomain),you'll need to upload a proxy page to enable cross-domaincommunication.
See cross-domain/example.html
- Upload
cross-domain/respond-proxy.html
toyour external domain - Upload
cross-domain/respond.proxy.gif
toyour origin domain - Reference the file(s)via
element(s):
If you are having problems with the cross-domain setup, make surerespond-proxy.html does not have a query string appended to it.
Note: HUGE thanks to @doctyper for the contributions in thecross-domain proxy!
Support & Caveats
Some notes to keep in mind:
This script's focus is purposely verynarrow: only min-width and max-width media queries and all mediatypes (screen, print, etc) are translated to non-supportingbrowsers. I wanted to keep things simple for filesize, maintenance,and performance, so I've intentionally limited support to queriesthat are essential to building a (mobile-first) responsive design.In the future, I may rework things a bit to include a hook forpatching-in additional media query features - stay tuned!
Browsers that natively support CSS3Media Queries are opted-out of running this script as quickly aspossible. In testing for support, all other browsers are subjectedto a quick test to determine whether they support media queries ornot before proceeding to run the script. This test is now includedseparately at the top, and uses the window.matchMedia polyfillfound here:
https://github.com/paulirish/matchMedia.js .If you are already including this polyfill via Modernizr orotherwise, feel free to remove that part. This script relies on no other scriptsor frameworks (aside from the included matchMedia polyfill), and isoptimized for mobile delivery (~1kb total filesize min/gzip)
As you might guess, thisimplementation is quite dumb in regards to CSS parsing rules. Thisis a good thing, because that allows it to run really fast, but itslooseness may also cause unexpected behavior. For example: if youenclose a whole media query in a comment intending to disable itsrules, you'll probably find that those rules will end up enabled innon-media-query-supporting browsers.
Respond.js doesn't parse CSSreferenced via @import, nor does it work with media queries withinstyle elements, as those styles can't be re-requested forparsing.
Due to security restrictions, somebrowsers may not allow this script to work on file:// urls (becauseit uses xmlHttpRequest). Run it on a web server.
If the request for the CSS file thatincludes MQ-specific styling is behind a redirect, Respond.js willfail silently. CSS files should respond with a 200 status.
Currently, media attributes on linkelements are supported, but only if the linked stylesheet containsno media queries. If it does contain queries, the media attributewill be ignored and the internal queries will be parsed normally.In other words, @media statements in the CSS take priority.
Reportedly, if CSS files are encodedin UTF-8 with Byte-Order-Mark (BOM), they will not work withRespond.js in IE7 or IE8. Noted in issue #97
WARNING: Including @font-face rulesinside a media query will cause IE7 and IE8 to hang during load. Towork around this, place @font-face rules in the wide open, as asibling to other media queries.
If you have more than 32 stylesheetsreferenced, IE will throw an error,
Invalidprocedure call or argument
. Concatenate your CSS and theissue should go away.Sass/SCSS source maps are notsupported;
@media-sass-debug-info
will break respond.js.Noted in issue #148 Internet Explorer 9 supports css3media queries, but not within frames when the CSS containing themedia query is in an external file (this appears to be a bug in IE9— see
http://stackoverflow.com/questions/10316247/media-queries-fail-inside-ie9-iframe).See this commit for a fix if you're having this problem.https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb42 6702fc3540d2e603 Nested Media Queries are notsupported
How's it work?
Basically, the script loops through the CSS referenced in the pageand runs a regular expression or two on their contents to findmedia queries and their associated blocks of CSS. In InternetExplorer, the content of the stylesheet is impossible to retrievein its pre-parsed state (which in IE 8-, means its media queriesare removed from the text), so Respond.js re-requests the CSS filesusing Ajax and parses the text response from there. Be sure toconfigure your CSS files' caching properly so that this re-requestdoesn't actually go to the server, hitting your browser cacheinstead.
From there, each media query block is appended to the head in ordervia style elements, and those style elements are enabled anddisabled (read: appended and removed from the DOM) depending on howtheir min/max width compares with the browser width. The mediaattribute on the style elements will match that of the query in theCSS, so it could be "screen", "projector", or whatever you want.Any relative paths contained in the CSS will be prefixed by theirstylesheet's href, so image paths will direct to their properdestination
API Options?
Sure, a couple:
- respond.update() : rerun the parser (helpful if you added astylesheet to the page and it needs to be translated)
- respond.mediaQueriesSupported: set to true if the browsernatively supports media queries.
- respond.getEmValue() : returns the pixel value of one em
Alternatives to thisscript
This isn't the only CSS3 Media Query polyfill script out there; butit damn well may be the fastest.
If you're looking for more robust CSS3 Media Query support, youmight check out
- Respond.js-A fast &amp…
- AMP
- AMP
- amp
- Interview Q&A
- MFC ------------ Q & A
- [js]Uncaught RangeError:&nb…
- mockserver.js: Uncaught&nbs…
- js target&currentTarget
- HTML <a></a&…
- OGNL & ValueStack&…
- V$FLASHBACK_DATABASE_LOG &&…
- PHP Q&A(转载)
- AT&A汇编语言语法
- Spring.Net&amp;amp;amp;amp;amp;NHibernate 学习
- TweenLite&amp;amp;&amp;amp;TweenMax系列(一)
- 链表回文串判断&&链式A+B
- Visual Studio 2017 已知问题 Q&amp;A
- CSS3的文字阴影—text-shadow
- cvs回退与分支等
- CSS3动画 Animation
- CSS3 动画 Transition
- the meta:‘http-equiv=“X-UA…
- Respond.js-A fast &amp…
- editplus快捷键
- sublime 快捷键
- CSS字体中英文名称对照表 CSS…
- 分页功能学习笔记(Struts2+jsp)
- iframe安全威胁
- @import 对于网站的性能有某些负面…
- jade Language Reference
- CKEDITOR使用与配置