"@media only screen and“不会根据输入内容删除

Question

我正在实现一个基于响应式设计的HTML应用程序。我使用"@media only screen“来设置响应式样式。

我使用下面的Css代码进行移动定位(横向/纵向)：

@media only screen and (max-device-width: 465px), screen and (max-width: 465px)
.align {
    width: 33.33%;
}

@media only screen and (max-device-width: 736px), screen and (max-width: 736px)
.align {
    width: 25%;
}

第一个是垂直的，第二个是景观风格的。

问题是，当我将浏览器方向从纵向更改为横向时，在css中没有删除纵向样式，这两种样式都处于启用状态，但如果我减小浏览器大小，垂直样式将被删除，横向样式将承担责任。

那么，如何在不更改浏览器窗口大小的情况下从页面中删除不需要的样式呢？

Answer 1

您可以为方向提供一些附加条件

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Answer 2

我认为我们也可以定义没有方向的css，通过定义媒体宽度就足够了

@media (max-width: 465px){

//Do your styling here

}

@media (max-width: 1024px){

//Do your styling here

}

这将帮助您设计css样式，不仅适用于移动人像和lanscape，也适用于屏幕大小的设备。