我可以使用这些@media规格吗？

我在尝试构建我的第一个响应式网站。我不知道我是否可以使用下面的代码：我可以使用这些@media规格吗？

在HTML中的头：

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

在一个CSS：

@media only screen and (max-device-width : 480px) {} 
@media only screen and (min-device-width : 480px) and (max-device-width : 960px) {}

这将是3种类型的设备。所有分辨率高于960像素的图像均具有第三种规格，未由@media规定。我减少了：

@media only screen and (min-device-width : 960px) {}

可以吗？

可我也只用简化代码：

@media only screen and (max-device-width : 480px) {}

因为我认为，平板电脑和PC版本都将是非常相似的。所以问题是，我需要3 @media还是只能使用1 @media & @media未指定的所有内容都适用于PC或平板电脑？

在此先感谢！

来源

2014-11-08 Baki

在媒体查询中的每个样式表规则不嵌套在上使用所有设备。

您可以使用@media only screen and (max-device-width : 480px) {}和窝在那里所有的规则应适用于最大设备宽度设备：480像素。

有两种可能的方法来创建响应站点，CSS：移动第一和桌面第一。如果您使用的是普通的样式表桌面设备和媒体查询为较小的设备是一个桌面第一尝试。

只是去更详细，我使用这些样式表为我的项目，我在网上找到（我不是很确定，我发现它，所以如果有人知道我会添加学分）。这些似乎是最准确的媒体的查询：

/* 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 */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    /* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
}

来源

2014-11-08 15:33:28 TheFrozenOne

谢谢，但你实际使用的所有媒体查询每一个网站吗？使用1-3是不够的？ – Baki 2014-11-08 15:52:58

@Baki不，我不知道。我经常尝试通过使用智能CSS规则来避免它们。例如，将内容设置为'width：100％'，其中'max-width：1000px'。但在某些情况下，覆盖所有设备并优化您的网站非常有用。如果你可以处理使用更少的查询那么做！我想你的解决方案会工作得很好，但你需要检查结果。 – TheFrozenOne 2014-11-08 17:04:55

@media只有屏幕和（MAX- 设备宽度：480像素）{}仅 @media屏幕和（MIN- 设备宽度：481px ）和（max- 设备宽度：960px）{}

最小设备宽度的像素应该大于最大设备宽度。当屏幕宽度为480px时，Elseb会冲突，第二个条件将被第二个条件覆盖。这意味着它将呈现一个480像素的屏幕分辨率，这是一个移动设备的PC设计。希望它有帮助。

来源

2014-11-08 15:44:34

我可以使用这些@media规格吗？

回答

相关问题