css3 移动媒体查询

Posted 2023-03-10

【中文标题】css3 移动媒体查询

【英文标题】：css3 mobile media queries

【发布时间】：2013-02-04 00:00:44

【问题描述】：

我对纵向和横向有不同的看法

    /* portrait ----------- */
    @media only screen 
    and (max-width : 320px) 
      body
         padding:20px;
        
    


  /* landscape----------- */
      @media only screen 
    and (min-width : 321px) 
     body
        
        padding:60px;
        
    
  /* webpage----------- */
       body
            
            padding:0px;
            

然而，横向 css 对网页视图的影响。我如何溢出网页？ 我试图在网页上进行另一个媒体查询，但没有奏效。 我也尝试了(min-device-width : 321px) 仅用于设备，但它不起作用

【问题讨论】：

css expanding based on portrait or landscape screen size?

【参考方案1】：

如this article 中所述，媒体查询规范包括方向检测。它应该看起来像这样：

@media screen and (orientation:landscape) and (min-width:321px) 
    foo 
        padding:60px;
    


@media screen and (orientation:portrait) and (max-width:320px) 
    foo 
        padding:20px;
    

等等。

【讨论】：

刚试过！和我使用查询一样。我想我需要设置 max-width 。

这确实设置了max-width。您是否有可能尝试在需要前缀而不使用前缀的浏览器中使用它？

让我省去为所有内容添加前缀的麻烦。这是a tiny javascript, Prefix Free，您可以在任何带有指向需要前缀的 CSS 属性的链接的页面上包含它。从长远来看，它会为您节省时间和麻烦。