使用CSS Media Query可实现响应式布局，1. 通过@media规则根据屏幕宽度设置断点适配不同设备；2. 可检测方向、分辨率等特性精细控制样式；3. 推荐移动优先策略，先定义小屏样式再逐步增强；4. 建议用em单位、添加viewport标签并保持断点简洁，结合Flexbox或Grid布局提升适配效果。
要让网页在不同设备上正常显示，使用 CSS Media Query 是最常用的方法。它能根据屏幕宽度、高度、方向等条件动态调整样式，实现响应式布局。
1. 基础语法：按屏幕宽度适配
Media Query 的核心是 @media 规则，通过检测视口宽度来应用不同的 CSS 样式。
常见断点（breakpoints）参考：手机竖屏： max-width: 480px 或 768px平板横屏： min-width: 769px 且 max-width: 1024px桌面端： min-width: 1025px
示例代码：
@media (max-width: 768px) { body { font-size: 14px; } .container { width: 100%; padding: 10px; }}@media (min-width: 769px) and (max-width: 1024px) {.container {width: 90%;margin: 0 auto;}}
@media (min-width: 1025px) {.container {width: 80%;max-width: 1200px;margin: 0 auto;}}
2. 使用设备特性进行更精细控制
除了宽度，还可以检测设备的其他属性：
立即学习“前端免费学习笔记（深入）”；
设备方向： portrait 或 landscape分辨率： 高清屏适配视口高度： 用于全屏布局调整
例子：
侧栏菜单模块化响应式模板
响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该
58 查看详情
/* 竖屏时调整布局 */@media (orientation: portrait) { .banner { height: 50vh; }}/ 横屏时调整 /@media (orientation: landscape) {.banner {height: 30vh;}}
/ 高分辨率屏幕加载高清图片 /@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {.icon {background-image: url(icon@2x.png);background-size: 20px 20px;}}
3. 移动优先 vs 桌面优先策略
推荐采用移动优先开发方式：先写手机样式，再用 min-width 逐步增强大屏体验。
/* 默认样式（小屏） */.grid { display: flex; flex-direction: column;}.item {width: 100%;}
/ 大屏优化 /@media (min-width: 769px) {.grid {flex-direction: row;gap: 20px;}.item {flex: 1;}}
这样可以确保小设备加载更轻量的样式，提升性能。
4. 实用技巧与注意事项
提高兼容性和可维护性的小建议：
使用 em 而不是 px 作为 media query 单位（1em = 16px），避免缩放问题在 HTML 中添加 viewport meta 标签：避免写太多固定断点，保持样式简洁测试时使用浏览器开发者工具模拟不同设备
基本上就这些。掌握好 media query，配合弹性布局（Flexbox）或网格（Grid），就能应对大多数响应式需求了。
以上就是如何用css media query实现不同屏幕适配的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1048258.html
微信扫一扫 
支付宝扫一扫 
