使用媒体查询内联样式[重复]

Posted 2023-03-06

【中文标题】使用媒体查询内联样式[重复]

【英文标题】：Use media query inline style [duplicate]

【发布时间】：2012-10-12 22:55:09

【问题描述】：

我知道这听起来很荒谬，但我可以使用内联样式的 CSS 媒体查询吗？原因是我在 php 中呼应背景，如果设备是视网膜，则需要使用视网膜大小的图像。

ie: <div style="background:url(normal.png); <- need to add style for retina device

【参考方案1】：

据我所知，不在内联样式声明中。

但是，如果您在 PHP 中回显并且 真的 无法访问样式表，我建议您在媒体查询中回显内联 <style /> 元素并使用 div 类。

即

<style type="text/css">
    .bg 
        background: url(background.jpg);
    
    @media only screen and (max-device-width: 480px)  /* Change to whatever media query you require */
        .bg 
             background: url(background_highres.jpg);
        
    

</style>
<div class="bg">...</div>

【讨论】：

这是否打破了在头部外部注入样式的惯例？

您不必将其放在页眉之外。