CSS 横向失败

Question

我想使用媒体查询调整列宽，但我做不到，所以我需要专家建议，如果您 want.The 我的 .cities [=23] 出现问题，我可以向您展示完整代码=] 和 .cities .col，我无法更改宽度、字体大小、图标大小。什么都没有。

谢谢

CSS代码：

 @media only screen and (max-width:767) and (orientation:landscape) {
        /* Styles for Landscape screen */
        header {
            height: 200vh;
        }
        header nav li a {
            font-size: 85%;
        }
        .cities .col {
            display: block;
            width: 100%;
        }
        .cities h3 {
            font-size: 10%;
        }
        .ios-small {
            font-size: 100%;
        }
        .cities .col img {
            width: 100%
        }
        .cities {
            padding: 0px;
        }
        .cities .col {
            margin-top: 5%;
            padding-bottom: 2%;
            width: 100%;
            transition: width 0.3s;
        }
        .cities .col:hover {
            background: rgba(234, 234, 234, 0.9);
            color: black;
        }
        .cities .col img {
            width: 100%;
            height: auto;
            margin: 0 0 0 0px;
        }
        .cities h3 {
            text-align: left;
            margin: -4px 0 0 0px;
            font-size: 100%;
        }
        .ios-small {
            font-size: 20%;
            font-weight: 200;
            margin-right: 5px;
            font-style: italic;
            color: #e67e22;
        }
    }

This is the Preview of Website in Iphone6 Landscape

Answer 1

您需要为断点添加一个单位，因此 max-width:767px。

CSS 横向失败

CSS fail in landscape

css

media-queries

landscape