我需要动态加载横幅图像到HTML5应用程序，并希望几个不同的版本，以适应屏幕宽度。我不能正确地确定手机的屏幕宽度，所以我能想到的唯一方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。
例如:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
这可能吗，或者有人有其他建议吗?
当前回答
我试着测试了一下，似乎没有效果，但我很好奇苹果为什么要用它。我刚刚在https://linkmaker.itunes.apple.com/us/上，注意到在生成的代码中，如果你选择“大按钮”单选按钮，他们正在使用内联媒体查询。
<a href="#"
target="itunes_store"
style="
display:inline-block;
overflow:hidden;
background:url(#.png) no-repeat;
width:135px;
height:40px;
@media only screen{
background-image:url(#);
}
"></a>
注:增加了换行符的可读性，原始生成的代码是最小化的
其他回答
@media at-rules和media查询不能存在于内联样式属性中，因为它们只能包含property: value声明。正如规范所言:
style属性的值必须与CSS声明块的内容的语法匹配
仅在特定媒体中将样式应用到特定元素的唯一方法是在样式表中使用单独的规则(无论是外部链接还是在<style>元素中内部链接)，这意味着您需要为它提供一个选择器。你可以使用浏览器的开发工具获取一个，或者找出一个类和/或ID组合来隔离这个元素:
#myelement { background-image: url(particular_ad.png); }
@media (max-width: 300px) {
#myelement { background-image: url(particular_ad_small.png); }
}
如果由于页面的性质，你无法找到一个选择器来可靠地匹配这个元素，你可以使用一个自定义属性，前提是你不需要担心特异性或Internet Explorer:
:root { --particular-ad: url(particular_ad.png); }
@media (max-width: 300px) {
:root { --particular-ad: url(particular_ad_small.png); }
}
<span style="background-image: var(--particular-ad);"></span>
通过使用像Breakpoint for Sass这样的东西，可以实现内联媒体查询
这篇博客文章很好地解释了内联媒体查询如何比单独的块更易于管理:There Is No Breakpoint
与内联媒体查询相关的是“元素查询”的思想，一些有趣的阅读是:
关于元素媒体查询的思考 媒体查询是一种Hack 媒体查询不是答案:元素查询填充 If else块
是的，你可以通过window.matchMedia使用javascript
桌面为红色文本 绿色文字的平板电脑 移动为蓝色文本
//isat_style_media_query_for_desktop_mobile_tablets var tablets = window.matchMedia("(max-width: 768px)");//for tablet devices var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices isat_find_device_tablets(tablets);//apply style for tablets isat_find_device_mobile(mobiles);//apply style for mobiles isat_find_device_desktops(desktops);//apply style for desktops // isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices // desktops.addListener(isat_find_device_desktops); // Attach listener function on state changes function isat_find_device_mobile(mob) { // isat mobile style here var daynight=document.getElementById("daynight"); daynight.style.color="blue"; // isat mobile style here } function isat_find_device_desktops(des) { // isat mobile style here var daynight=document.getElementById("daynight"); daynight.style.color="red"; // isat mobile style here } function isat_find_device_tablets(tab) { // isat mobile style here var daynight=document.getElementById("daynight"); daynight.style.color="green"; // isat mobile style here } //isat_style_media_query_for_desktop_mobile_tablets <div id="daynight">tricky style for mobile,desktop and tablet</div>
Yes, this is quite possible but only as using javascript event attributes in HTML elements. Here you have to keep in mind that not every html tag element could fire every js event, which can listen for changes to the DOM, such as onresize or execute js code, when DOM is loaded, as onload event does. In the example above I use body and img tags as they are capable to fire img only onload event, body tag both onload and onresize. Depending on the event, you could choose the approach to resolve your issue, as using the code from the examples.
使用body标签:
<body onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" onresize="
if (document.documentElement.offsetWidth <= 600) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
"><!-- Some other code goes here --></body>
使用img标签:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="
width="100%" style="width: 100vw; height: 1px;"
alt="" height="1"
onload="
const mediaQueryList = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log('This is a narrow screen — 600px wide or less.');
document.body.style.backgroundColor = 'pink';
} else {
/* the viewport is more than 600 pixels wide */
console.log('This is a wide screen — more than 600px wide.');
document.body.style.backgroundColor = 'aquamarine';
}
}
mediaQueryList.addEventListener('change', screenTest);
" />
您还应该记住，如果您决定使用这种在HTML信件中嵌入mediaquery css的方式，它可能不会通过邮件服务器的黑名单，这在大多数情况下会减少此类javascript事件。但对于一些ajax或横幅，一些动态应用程序，这种方法应该没有问题。
嘿，我刚写完。
现在你可以使用<div style="color: red;@media (max-width: 200px) {color:绿色}">左右。
享受。
