Question

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

在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种类型的设备。分辨率高于960px的所有内容都有第三个规范，未由@media指定。我减少了：

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

这样可以吗？

我还可以通过以下方式简化代码：

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

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

提前致谢！

Answer 1

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

您可以使用@media only screen and (max-device-width : 480px) {}并在其中嵌套应用于max-device-width设备的所有规则：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 */
}

Answer 2

@media only screen and（max- 设备宽度：480px）{} @media only screen and（min- 设备宽度：481px）和（max- device-width：960px）{}

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

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

2 个答案: