Question

我需要动态地将横幅图片加载到HTML5应用中，并希望有几个不同的版本以适应屏幕宽度。我无法正确确定手机的屏幕宽度，因此我能想到的唯一方法是添加div的背景图像并使用@media确定屏幕宽度并显示正确的图像。

例如：

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

这可能，还是有人有任何其他建议？

Answer 1

不，@media规则和媒体查询不能存在于内联样式属性中，因为它们只能包含property: value声明。正如the spec所说：

style属性的值必须与CSS declaration block
的内容语法相匹配

仅在某些媒体中将元素应用于元素的唯一方法是在样式表中使用单独的规则，这意味着您需要为它选择一个选择器。

虚拟span选择器看起来像这样，但如果您定位的是非常具体的元素，则需要更具体的选择器：

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}

Answer 2

<强>问题

不，媒体查询不能以这种方式使用

<span style="@media (...) { ... }"></span>

<强>解决方案

但是，如果您希望提供可在运行中使用的特定行为并且具有响应性，则可以使用style标记而不是属性。

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>

See the code working in live on CodePen

例如，在我的博客中，我在<style> CSS声明之后的<head>中注入<link>标记，并且它包含除真实之外提供的textarea的内容当我写一个artitle时，内容textarea用于创建额外的类。

注意：scoped属性是HTML5规范的一部分。如果您不使用它，验证器会责怪您，但浏览器目前不支持真正的目的：仅限于<style>的内容仅限于immediatly父元素和该元素的子元素。如果<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>

Answer 3

内联样式目前不能包含除声明之外的任何内容（property: value对）。

您可以在文档的style部分使用media元素和head个属性。

Answer 4

是的，如果您使用图片标签，则可以在inline-css中编写媒体查询。对于不同的设备尺寸，您可以获得不同的图像。

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Answer 5

如果您正在使用Bootstrap Responsive Utilities或类似的替代方案，允许根据断点隐藏/显示div，则可以使用多个元素并显示最合适的元素。即。

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>

Answer 6

样式中的媒体查询 - 属性现在无法实现。但是如果你必须通过Javascript动态设置它。您可以通过JS插入该规则。

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

这就像样式表中的样式一样。所以要注意特异性。

Answer 7

我试图对此进行测试，但它似乎没有用，但我很好奇为什么Apple正在使用它。我刚刚在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>

注意：为了便于阅读，添加了换行符，缩小了原始生成的代码

Answer 8

Hey I just wrote it.

现在您可以使用<div style="color: red; @media (max-width: 200px) { color: green }">左右。

享受。

Answer 9

对于Sass

使用Breakpoint之类的内容可以进行内联媒体查询

此博客文章很好地解释了内联媒体查询如何比单独的块更易于管理：There Is No Breakpoint

与内联媒体查询相关的是“元素查询”的概念，一些有趣的读物是：

Answer 10

您可以使用image-set（）

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">

Answer 11

是的，您可以通过 window.matchMedia

使用javascript

桌面为红色文本
平板电脑输入绿色文字
蓝色文字移动

from collections import defaultdict

def sum_row(row):
    result = defaultdict(int)
    for key, val in row[1]:
        result[key] += val
    return (row[0],list(result.items()))

data_rdd = data_rdd.map(sum_row)
print(data_rdd.collect())

# [(0, [('a', 1), ('b', 3)]), (1, [('h', 2), ('c', 1), ('d', 1)])]

//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

是否可以将CSS @media规则内联？

11 个答案: