通过CSS Media Query的orientation属性区分横竖屏，结合viewport元标签实现响应式布局，竖屏时适配窄屏样式，横屏时利用宽屏空间优化展示，提升移动端用户体验。
在移动设备上，用户经常会在横屏和竖屏之间切换。为了让页面在这两种模式下都能良好显示，可以通过 CSS Media Query 来区分屏幕方向并应用不同的样式。
CSS 提供了 orientation 媒体特性，可以根据设备当前的屏幕方向设置不同样式：
示例代码：
@media screen and (orientation: portrait) {
/* 竖屏时的样式 */
body {
background-color: lightblue;
}
.container {
width: 100%;
font-size: 14px;
}
}
<p>@media screen and (orientation: landscape) {
/<em> 横屏时的样式 </em>/
body {
background-color: lightcoral;
}
.container {
width: 80%;
margin: 0 auto;
font-size: 18px;
}
}</p>要让 media query 正常工作，必须在 HTML 的 <head> 中添加 viewport 元标签，确保浏览器正确解析屏幕尺寸：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
没有这个标签，移动端可能以桌面宽度渲染，导致 media query 判断失效。
根据方向调整布局时，可考虑以下优化：
基本上就这些。利用 orientation 配合 viewport，能有效提升移动端用户体验。不复杂但容易忽略细节。
以上就是如何用css media query实现横屏与竖屏适配的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
306
收藏
