Question

我尝试使用@media为网站设置两种不同的样式。但无论我使用手机还是电脑，它总是会加载桌面视图。

/* desktop screen */
@media (min-width: 801px){
   content desktop
}

/* mobile screen */
@media (max-width: 800px){
  content mobile
}

我做错了什么？

（完整的CSS位于olli.ml）

Answer 1

您问题的实际答案是：您使用width和device-width错误。改变第169行：

@media (max-device-width: 800px){

为：

@media (max-width: 800px){

如果您想专门定位手机，最好查看常用框架（如bootstrap或foundation）使用的媒体查询。您会发现许多广告的目标尺寸要小得多，例如320px或480px，而不是代码中的800px。

Answer 2

问题是CSS媒体查询区分功能而不是设备。因此，您可以尝试确定哪些功能与您要引用的设备相对应。在this site中，您有针对iPhone，iPad的媒体查询。例如：

iPhone 6的肖像和放大器景观：

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

这些查询尝试使用其功能减少使用特定设备的情况。在this site中，您有一组针对特定设备的预定义查询。

但请注意the difference between Desktop and Mobile可能不那么明显。

Answer 3

并且不要忘记将meta添加到<head></head>

<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />

CSS @media用于区分移动和桌面设备

3 个答案: