Dan*_*cer 269 html css css3 media-queries
我需要动态地将横幅图像加载到HTML5应用程序中,并希望有几个不同的版本以适应屏幕宽度.我无法正确确定手机的屏幕宽度,因此我能想到的唯一方法是添加div的背景图像并使用@media确定屏幕宽度并显示正确的图像.
例如:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
这有可能,还是有人有任何其他建议吗？
Bol*_*ock 261
不,@media规则和媒体查询不能存在于内联样式属性中,因为它们只能包含property: value声明.正如规范所说:
style属性的值必须与CSS 声明块的内容的语法匹配
仅在某些媒体中将样式应用于元素的唯一方法是在样式表中使用单独的规则,这意味着您需要为它选择一个选择器.
虚拟span选择器看起来像这样,但如果您要定位一个非常特定的元素,则需要一个更具体的选择器:
span { background-image: url(particular_ad.png); }
@media (max-width: 300px) {
span { background-image: url(particular_ad_small.png); }
}
Bru*_*eur 122
问题
不,媒体查询不能以这种方式使用
<span style="@media (...) { ... }"></span>
解
但是,如果您希望提供可在运行中使用的特定行为并且响应,则可以使用style标记而不是属性.
EI
<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>
例如,在我的博客中,我<style>在CSS声明<head>之后注入了一个标记<link>,它包含了真实内容textarea旁边提供的textarea的内容,以便在我编写artitle时动态创建额外的类.
注意:该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>
小智 8
如果您正在使用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>
小智 8
是的,如果您使用图片标记,则可以在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>
我尝试对其进行测试，但它似乎没有起作用，但我很好奇苹果为何使用它。我只是在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>
注意：增加了换行符以提高可读性，并减少了原始生成的代码
暂时无法在style-Attributes中进行媒体查询。但是，如果您必须通过Javascript动态设置它。您也可以通过JS插入该规则。
document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");
就像样式在样式表中一样。所以要注意特异性。
是的，您可以通过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>