使用CSS Media Query通过屏幕宽度设置断点可有效适配移动端设备。首先针对最大宽度（如max-width: 767px）定义手机样式，再按不同尺寸细化断点（如≤480px适配小屏，481px–767px适配大屏手机），并结合-webkit-min-device-pixel-ratio适配高清屏图片显示。推荐采用“移动端优先”策略，先编写小屏默认样式，再用min-width逐步增强平板及桌面端布局，确保响应式体验且控制文件体积。最终需结合实际设备测试优化展示效果。
要为移动端设备设置专用样式，使用 CSS Media Query 是最直接有效的方法。核心思路是根据设备的屏幕宽度应用不同的 CSS 样式，从而适配手机等小屏设备。
使用最大宽度（max-width）定义移动端样式
大多数移动设备的屏幕宽度小于 768px，因此可以通过 max-width 来针对这些设备编写样式。
例如：
/* 移动端样式 */
@media screen and (max-width: 767px) {
body {
font-size: 14px;
padding: 10px;
}
.container {
width: 100%;
padding: 0;
}
nav ul {
flex-direction: column;
}
}
这段代码表示：当屏幕宽度小于或等于 767px 时，启用里面的样式规则，适合手机竖屏浏览。
立即学习“前端免费学习笔记（深入）”；
针对不同移动设备尺寸细化响应
不同手机的分辨率有差异，可以进一步细分断点以优化体验。
常见做法：
- 针对 iPhone 竖屏（通常 320px–480px）
- 针对平板横屏或大屏手机（如 768px 左右）
/* 小屏手机 */
@media (max-width: 480px) {
h1 { font-size: 20px; }
.btn { padding: 10px; }
}
/ 大屏手机或小平板 /
@media (min-width: 481px) and (max-width: 767px) {
h1 { font-size: 24px; }
}
使用设备像素比适配高清屏
很多移动设备使用 Retina 屏幕，可通过 -webkit-min-device-pixel-ratio 优化图片或边框显示。
示例：
@media (-webkit-min-device-pixel-ratio: 2) {
.icon {
background-image: url(icon@2x.png);
background-size: 20px 20px;
}
}
这样可确保在高 DPI 设备上显示更清晰的图像。
移动端优先的编写习惯
推荐采用“移动端优先”策略：先写移动端样式，再用 min-width 逐步增强大屏样式。
/* 默认样式（适用于小屏） */
.container {
width: 100%;
}
/ 平板及以上 /
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/ 桌面端 /
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
这种方式更符合现代响应式设计逻辑，文件体积也更可控。
基本上就这些。关键在于合理设置断点，结合实际设备测试，让页面在各种手机上都能良好展示。
