使用手机的朋友都会知道，同一个网站或者其他应用在横屏或者竖屏的时候显示是不一样的。
下面就分享一下如何让页面能够匹配网站的横屏或者竖屏。
毕竟横屏和竖屏差距是很大的，所以需要根据不同的屏幕状态设置不同的样式。
一.在一个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代码实例