Question

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

＆＃13;

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

＆＃13;

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

Answer 1

我认为您的第一个媒体查询中存在冲突的规则。您将设备高度设置为比设备宽度更大的值，即设置为“纵向”，但您也可以将方向设置为“横向”。要么取消横向规格，要么切换宽度和高度值。

如果你最终切换宽度和高度值，你还需要声明第二个媒体查询，因为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中使用不同的样式

1 个答案: