<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 html css media-queries
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我如何管理两个不同的媒体查询
/* 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 用于这两个媒体查询。当我尝试为 320x640 屏幕分辨率添加样式值时。它不工作。但是，当我更改 414x736 值时，它也会更改 320x640 屏幕分辨率样式。如何在不更改其他 414x736 屏幕分辨率样式的情况下更改 320x640 屏幕分辨率样式？
最佳答案
我认为您在第一个媒体查询中有冲突的规则。您将设备高度设置为大于设备宽度的值，即“纵向”，但您也将方向设置为“横向”。要么消除横向规范，要么切换宽度和高度值。
如果您最终切换了宽度和高度值，您还需要声明第二个媒体查询，因为 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 - 在一个 html 中使用不同的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35117576/