@media查询设备 - 如何纵向一个CSS,景观其他？

您可以使用css媒体功能"orientation"来完成此操作.这样,您可以根据屏幕方向指定样式,与屏幕大小无关.您可以在此处找到有关此媒体功能的官方w3.org定义.结合developer.mozilla.org上的规范,这将解释它是如何工作的.

引自w3.org关于'orientation'媒体功能:

当' height '媒体特征的值大于或等于 ' width '媒体特征的值时,'orientation'媒体特征是'portrait' .否则'方向'是'风景'.

developer.mozilla.org关于"方向"功能的注释/引用:

注意:此值(即纵向或横向)并没有与实际设备的方向.在纵向打开大多数设备上的软键盘将导致视口变得比它高,从而导致浏览器使用横向样式而不是纵向.

所以概括来说,实际上并不是触发纵向或横向媒体查询的屏幕方向.然而,它是屏幕的高度和宽度之间的比例!因此,使用非移动/触觉设备的"定向功能"也是有意义的,因此我添加了一个小型演示来显示这些媒体查询的行为.

JSFIDDLE DEMO (尝试调整视图端口的大小)

以下是影响肖像和横向方向的代表性媒体查询.

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*hide your main content and display message */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* show your content*/

 }