我需要动态加载横幅图像到HTML5应用程序，并希望几个不同的版本，以适应屏幕宽度。我不能正确地确定手机的屏幕宽度，所以我能想到的唯一方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。
例如:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
这可能吗，或者有人有其他建议吗?
当前回答
内联样式目前只能包含声明(属性:值对)。
您可以在文档的头部部分使用带有适当媒体属性的样式元素。
其他回答
他们没有在HTML级别上考虑媒体查询，这是疯狂的，因为很明显样式css是在HTML之后加载的，在HTML内部内联样式是一个巨大的缺点。
样式-属性的媒体查询现在不可能。 但如果你必须通过Javascript动态设置。 你也可以通过JS插入该规则。
document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
这就好像样式就在样式表中一样。所以要注意特殊性。
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或横幅，一些动态应用程序，这种方法应该没有问题。
问题
不，媒体查询不能以这种方式使用
<span style="@media (...) { ... }"></span>
解决方案
但是，如果您希望提供一个动态可用且响应性强的特定行为，则可以使用样式标记而不是属性。
e.i.
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
@media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
在CodePen上查看实时工作的代码
以我的博客为例，我在<head> <link>声明后面为CSS注入了一个<style>标记，它包含了一个文本区域的内容，在我写一篇文章时，它提供了一个真正的内容textarea，用于创建额外的类。
注意:scoped属性是HTML5规范的一部分。如果你不使用它，验证器会责备你，但是浏览器目前不支持真正的目的:将<style>的内容限定在直接的父元素和该元素的子元素上。如果<style>元素在<head>标记中，Scoped不是强制性的。
更新:我建议总是在移动第一的方式使用规则，所以以前的代码应该是:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
是的，你可以通过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>
