通过CSS Media Query的orientation属性区分横竖屏，结合viewport元标签实现响应式布局，竖屏时适配窄屏样式，横屏时利用宽屏空间优化展示，提升移动端用户体验。
在移动设备上，用户经常会在横屏和竖屏之间切换。为了让页面在这两种模式下都能良好显示，可以通过 CSS Media Query 来区分屏幕方向并应用不同的样式。
使用 orientation 属性判断横屏与竖屏
CSS 提供了 orientation 媒体特性，可以根据设备当前的屏幕方向设置不同样式：
portrait：高度大于或等于宽度（竖屏）landscape：宽度大于高度（横屏）
示例代码：
@media screen and (orientation: portrait) { /* 竖屏时的样式 */ body { background-color: lightblue; } .container { width: 100%; font-size: 14px; }}@media screen and (orientation: landscape) {/ 横屏时的样式 /body {background-color: lightcoral;}.container {width: 80%;margin: 0 auto;font-size: 18px;}}
结合 viewport 实现响应式布局
要让 media query 正常工作，必须在 HTML 的 中添加 viewport 元标签，确保浏览器正确解析屏幕尺寸：
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
没有这个标签，移动端可能以桌面宽度渲染，导致 media query 判断失效。
实际应用场景建议
根据方向调整布局时，可考虑以下优化：
横屏时空间更宽，适合展示多列布局或增大字体竖屏时内容应垂直堆叠，避免横向滚动某些组件（如视频播放器）可在横屏时自动全屏表单输入时竖屏更适合单手操作，减少横向跨度
基本上就这些。利用 orientation 配合 viewport，能有效提升移动端用户体验。不复杂但容易忽略细节。
以上就是如何用css media query实现横屏与竖屏适配的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1058247.html
微信扫一扫 
支付宝扫一扫 
