响应式web设计——don't break the web——来自微软

data-resolved="true"
<img alt="Microsoft" src="lg-2x.png" data-source-index="1" />
data-disable-swap-below data-defer
data-disable-swap-below data-defer data-resolved="true"
@media
Breakpoint timeline
Decide whether different is ok
IE 6 IE 10
Pixel perfect isn't always required
IE 6 IE 10
Use the right tool for the job
Microsoft logo
style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet;
var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
if (Modernizr.fontface){ … }
There is no standard screen resolution
This is not the standard
image by Nic’s events’
More modern, but not the standard
What happens when feature detection looks like this?
function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0;
• Interoperable across all these browsers for the features’ core use cases
• Already used on the Web, including in their unprefixed form • Reached Candidate Recommendation or are likely to become Candidate Recommendations
drop their prefix Candidate Recommendation stage
Stats via Ars Technica
// If not IE then use addEventListener… if (erAgent.indexOf("MSIE") == -1) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
<img alt="Alt text" src="1600x540.jpg" data-source-index=&f_SegoeUI'
local('Segoe UI'), local('Segoe'), local('Segoe WP'),
'wf_SegoeUI'
'MSHPIconsRegular'
if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
'MSHPIconsRegular'
'\e003'
'\e004'
'menu.png'
'search.png'
爱贝影视是一个影视交流社区，为您每天第一时间提供最全最新的影视剧，并为您 提供影视观后交流平台，让您悦享高清体验
爱贝影视
image by Hire London
Smaller, but not the standard
image by Randolf Jorberg
Previous
New
device-width
device-width device-width
};
bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
Widely used
Test for @font-face
function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } };

National Electrical Manufacturers Association
• There were no recent additions or changes and no renaming or major changes are expected • Supported by at least two browsers other than Internet Explorer 10