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

我正试图建立我的第一个响应网站。我想知道是否可以使用以下代码：

在html的开头：

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

这将适用于3种类型的设备。分辨率大于960px的所有设备都有第三种规格，而不是

@media

指定的规格。我删去：

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

这样行吗

我是否可以仅使用以下命令来简化代码：

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

因为我认为平板电脑和个人电脑的版本将会非常相似。所以问题是，我需要3@media还是只能使用1@media？@media没有指定的所有东西都是用于PC或平板电脑的

---

提前谢谢

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

您可以使用

@仅媒体屏幕和（最大设备宽度：480px）{}

并在其中嵌套所有适用于最大设备宽度：480px的设备的规则

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

@仅媒体屏幕和（最大）- 设备宽度：480px）{} @仅媒体屏幕和（最小）- 设备宽度：481px）和（最大- 设备宽度：960px）{}

最小设备宽度应有一个像素大于上面校正的最大设备宽度。Elseb当屏幕宽度为480px时，将发生冲突，第二个条件将被第二个条件覆盖。这意味着它将呈现一个480px屏幕分辨率的pc设计，这是一个移动设备。

---

希望能有所帮助。

谢谢，但你真的使用了每个网站上的所有媒体查询吗？使用1-3还不够吗？@Baki不，我没有。我经常使用智能CSS规则来避免它们。将内容设置为

宽度：100%

，例如

最大宽度：1000px

。但在某些情况下，覆盖所有设备并优化站点是有用的。如果您可以处理使用较少的查询，请这样做！我想你的解决方案会很有效，但你需要检查结果。

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