Question

我正在尝试实现CSS @media选项，但我遇到了一些问题。我有三个选项，横向，纵向和移动。移动设备只能垂直激活但水平激活它不会激活（基本上可以获得横向选项）。

这是CSS：

@media (orientation:landscape) {
/* some css */
}

@media (orientation:portrait) {
/* some more css */
}

@media mobile {
/* more css */
/* basically the same as vertical */
}

我该如何正确地做到这一点？我希望我的移动选项与我的肖像选项相同。

Answer 1

你可以试试以下：

    /* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

对于手机屏幕，我认为你需要定义这样的最低分辨率：

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

Answer 2

你错过了screen and ...

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}

/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

iPhone通常会扩展网站，因此您还需要此元标记：

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

对于运行4.0之前版本的iPhone，您可以使用以下

/* Portrait */
@media screen and (max-width: 320px) {
    /* Portrait styles */
}

/* Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) {
    /* Landscape styles */
}

CSS @media选项无法正常工作

2 个答案: