有的时候,我们需要为移动端和桌面端指定不同的样式,达到最好的显示效果。这时,我们可以利用 CSS 的媒体查询来实现这个目的。
这是一个简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>判断设备方向</title>
<style>
@media (orientation: landscape) {
body {
background-color:blue;
}
}
@media (orientation: portrait) {
body {
background-color:yellow;
}
}
</style>
</head>
<body>
<p>横屏时颜色为蓝色,竖屏时颜色为黄色</p>
</body>
</html>
orientation: portrait 是竖屏,orientation: landscape 是横屏
此处评论已关闭