Question

我正在创建新的网站。我的目的是为桌面和移动创建一个页面，并根据设备（移动或桌面）设置样式。我知道我可以使用纯javascript实现一切，但我也想使用CSS和媒体查询。我的问题是：如何仅使用CSS媒体查询为移动设备设置样式？我试图使用：

@media only screen{
     style...
}

但它适用于移动和dekstop浏览器。

Answer 1

您不能简单地定位移动设备，但必须提供断点才能使其正常工作。您必须使用 min-width 或 max-width 才能使用

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

示例：这会隐藏带有侧边栏类的div，并在较小的屏幕上将容器宽度设置为100％

 @media only screen and (max-width : 321px) {
        .sidebar {
                display:none;
         }

         .container{
             width:100%;
           }

    }

Answer 2

您是否尝试过基于屏幕尺寸而不是设备来设置样式？

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

如果样式，甚至内容，从移动到桌面完全不同，使用像Bootstrap这样的框架可以让这很容易。您可以通过使用自己的媒体查询创建hidden-xs和visible-xs类来遵循其策略，并将这些类应用于不同的div。不是DRYest的做法，而是完成工作。

＆＃13;

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
  
    .hidden-xs {
      display: none;
     }
    
    .visible-xs {
      display: block;
    }
    
}

＆＃13;

如何仅为移动设备应用样式？

3 个答案: