多种风格合二为一 html

Question

我如何管理两个不同的媒体查询

/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: landscape) {
}

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape) {
    img{max-width: 8%;}
    .jumbotron{padding-top: 6px; padding-bottom: 2px;}
    .form-group{margin-bottom: 0;}
    .form-control{height: 28px; padding: 3px 6px;}
    .checkbox, .radio{margin-bottom: 1px; margin-top: 1px}
    label{margin-bottom: 0;}
    .btn{padding: 6px 10px; font-size: 12px;}
    body{font-size: 14px !important; line-height: 1.3;}
    .jumbotron{margin-bottom: 12px;}
}

我有一个 html 用于这两种媒体 query.When 我尝试为 320x640 屏幕分辨率添加样式值。它不工作。但是，当我更改 414x736 值时，它也会更改 320x640 屏幕分辨率样式。如何在不更改其他 414x736 屏幕分辨率样式的情况下更改 320x640 屏幕分辨率样式？

Answer 1

我认为您的第一个媒体查询中存在冲突规则。您将设备高度设置为大于设备宽度的值，即 'portrait'，但您还将方向设置为 'landscape'。消除横向规范，或切换宽度和高度值。

如果您最终切换了宽度和高度值，您还需要声明第二个媒体查询，因为 640px 的宽度落在另一个媒体查询的范围内。

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape) {
   //set styles here
}

@media screen
and (device-width: 640px)
and (device-height: 320px)
and (orientation: landscape) {
    //set styles
}

多种风格合二为一 html

Use different styles in one html

html

css

media-queries