如何用css media query实现不同屏幕适配

使用CSS Media Query可实现响应式布局，1. 通过@media规则根据屏幕宽度设置断点适配不同设备；2. 可检测方向、分辨率等特性精细控制样式；3. 推荐移动优先策略，先定义小屏样式再逐步增强；4. 建议用em单位、添加viewport标签并保持断点简洁，结合Flexbox或Grid布局提升适配效果。

要让网页在不同设备上正常显示，使用 CSS Media Query 是最常用的方法。它能根据屏幕宽度、高度、方向等条件动态调整样式，实现响应式布局。

1. 基础语法：按屏幕宽度适配

Media Query 的核心是 @media 规则，通过检测视口宽度来应用不同的 CSS 样式。

• 手机竖屏： 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;
  }
}
<p>@media (min-width: 769px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto;
}
}</p><p>@media (min-width: 1025px) {
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
}</p>

2. 使用设备特性进行更精细控制

除了宽度，还可以检测设备的其他属性：

立即学习“前端免费学习笔记（深入）”；

• 设备方向： portrait 或 landscape
• 分辨率： 高清屏适配
• 视口高度： 用于全屏布局调整

例子：

侧栏菜单模块化响应式模板

响应式网站设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该

58

查看详情

/* 竖屏时调整布局 */
@media (orientation: portrait) {
  .banner {
    height: 50vh;
  }
}
<p>/<em> 横屏时调整 </em>/
@media (orientation: landscape) {
.banner {
height: 30vh;
}
}</p><p>/<em> 高分辨率屏幕加载高清图片 </em>/
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.icon {
background-image: url(icon@2x.png);
background-size: 20px 20px;
}
}</p>

3. 移动优先 vs 桌面优先策略

推荐采用移动优先开发方式：先写手机样式，再用 min-width 逐步增强大屏体验。

/* 默认样式（小屏） */
.grid {
  display: flex;
  flex-direction: column;
}
<p>.item {
width: 100%;
}</p><p>/<em> 大屏优化 </em>/
@media (min-width: 769px) {
.grid {
flex-direction: row;
gap: 20px;
}
.item {
flex: 1;
}
}</p>

这样可以确保小设备加载更轻量的样式，提升性能。

4. 实用技巧与注意事项

提高兼容性和可维护性的小建议：

• 使用 em 而不是 px 作为 media query 单位（1em = 16px），避免缩放问题
• 在 HTML 中添加 viewport meta 标签：
  <meta name="viewport" content="width=device-width, initial-scale=1">
• 避免写太多固定断点，保持样式简洁
• 测试时使用浏览器开发者工具模拟不同设备

基本上就这些。掌握好 media query，配合弹性布局（Flexbox）或网格（Grid），就能应对大多数响应式需求了。

以上就是如何用css media query实现不同屏幕适配的详细内容，更多请关注php中文网其它相关文章！