{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 聊天终结者 的问题《Do link tags with media queries that resolve to fa》','https://www.manongdao.com/q-795321.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Given the following link tags:
<link rel="stylesheet" href="xlarge.css" media="max-width: 70em" />
<link rel="stylesheet" href="large.css" media="max-width: 60em" />
<link rel="stylesheet" href="medium.css" media="max-width: 50em" />
<link rel="stylesheet" href="small.css" media="max-width: 40em" />
<link rel="stylesheet" href="xsmall.css" media="max-width: 30em" />
<link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)" />
On initial load, are all six of these stylesheets downloaded, or just those that media queries have resolved to true? For instance, if I was on a retina-capable browser that calculated out to the medium breakpoint, would it only result in four http requests?
All the stylesheets will get downloaded regardless of whether the media queries evaluate to true or false. Even the first five media queries you have, which are all invalid because of missing parentheses around the
max-widthexpressions, won't prevent those stylesheets from being requested by the browser. (Invalid media queries simply resolve to false automatically.)In CSS, media queries only control whether or not the CSS rules in those stylesheets are applied to your page, not whether or not the stylesheets themselves get requested.