css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程

大家好，今天给大家分享的是css3 媒体查询方向：横屏竖屏教程，希望大家喜欢。

说道媒体查询，很多人会感觉陌生，但是对于做响应式开发的同学来说，那是再熟悉不过了。

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

就是比如我们的手机屏幕，在横屏的时候的显示，和竖屏时候的显示我们可以分别指定不同的样式。

我们先来看一组代码

//横屏

@media only screen and (orientation: landscape) {

body {

background-color: red;

}

}

//竖屏

@media only screen and (orientation: portrait) {

body {

background-color: blue;

}

}

上面的代码大家可以在横屏和竖屏的时候显示的样式是不一样的。

比如

在横屏的时候显示的是红色的，在竖屏的状态的时候显示的是蓝色的。

这样的话我们就可以根据横屏和竖屏来展示不同的样式了。

比如横屏的话可以展示的内容是很多的，我们来给定义一个样式，那么

竖屏的时候，展示的内容有点少，然后呢我们就可以在一行显示的内容要少一些。

好了，今天的css3 媒体查询方向：横屏竖屏教程就分享到这里，大家再见。