“@media唯一屏幕和”不会根据输入被删除

我正在实施基于响应式设计的HTML应用程序。我正在使用“@media only screen”作为响应式样式。“@media唯一屏幕和”不会根据输入被删除

我使用下面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中移除两种样式均处于启用状态，但如果我缩小浏览器大小，则将移除垂直样式，并且横向样式负责。
那么如何在不改变浏览器窗口大小的情况下从我的页面中删除不需要的样式。

来源

2016-11-25 Mahesh_045

不要使用'device-width' *，除非你完全知道**为什么**你正在使用它*。只能使用'width'。为了定位，只用那个！ '（orientation：landscape）''（orientation：portrait）'。 – connexo

可以

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

来源

2016-11-25 10:34:26 Indhu

同样，对于常见的媒体查询，您不希望使用'device-width'，而是'width'。 – connexo

我们也可以定义没有方向我认为CSS，通过定义介质宽度提供方位一些附加条件是足够的造型

@media (max-width: 465px){ 

//Do your styling here 

} 

@media (max-width: 1024px){ 

//Do your styling here 

}

这将帮助ü风格的CSS不仅适用于移动肖像和景观，而且适用于屏幕尺寸的设备。

来源

2016-11-25 10:43:55

“@media唯一屏幕和”不会根据输入被删除

回答

相关问题