使用手机的朋友都会知道，同一个网站或者其他应用在横屏或者竖屏的时候显示是不一样的。
下面就分享一下如何让页面能够匹配网站的横屏或者竖屏。
毕竟横屏和竖屏差距是很大的，所以需要根据不同的屏幕状态设置不同的样式。
一.在一个css代码中:
|
1
2
3
4
5
6
|
@media
screen
and (orientation:
portrait
){
/*竖屏 css*/
}
@media
screen
and (orientation:
landscape
){
/*横屏 css*/
}
|
二.引入不同的文件:
|
1
|
<
link
rel
=
"stylesheet"
media
=
"all and (orientation:portrait)"
href
=
"portrait.css"
>
|
上面的方式适用于竖屏。
|
1
|
<
link
rel
=
"stylesheet"
media
=
"all and (orientation:landscape)"
href
=
"landscape.css"
>
|
上面的方式适用于横屏。
原文发布时间为：2017-2-17
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：匹配横屏或者竖屏css代码实例
