©
This document uses PHP Chinese website manual Release
orientation:portrait | landscape
接受min/max前缀:是
portrait:指定输出设备中的页面可见区域高度大于或等于宽度
landscape:除portrait值情况外,都是landscape
本特性不接受min和max前缀。
简单列举几个应用示例:
@media screen and (orientation:portrait){ … } @import url(example.css) screen and (orientation:landscape);
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>media features orientation_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test::after { color: red; } @media screen and (orientation: portrait){ .test::after { content: "竖屏"; } } @media screen and (orientation: landscape){ .test::after { content: "横屏"; } } </style> </head> <body> <div class="test">你现在是:</div> </body> </html>
点击 "运行实例" 按钮查看在线实例