在 CSS 中，针对手机屏幕设置样式通常会用到媒体查询（Media Queries）。媒体查询可以让你根据不同的屏幕尺寸、分辨率或其他特性来应用不同的样式规则。
以下是一个基本的媒体查询示例，用于针对手机屏幕设置样式：
/* 针对所有设备的基本样式 */
body {
background-color: #f0f0f0;
}
/* 针对屏幕宽度小于 600px 的设备，通常是手机 */
@media screen and (max-width: 600px) {
body {
background-color: #ddd;
}
}在这个例子中，当设备的屏幕宽度小于 600px 时，背景颜色会变更为深灰色。
常见的媒体查询断点
虽然你可以自由选择任何断点值，但以下是一些常见的尺寸，它们基于主流设备的实际屏幕尺寸：
- 小型手机: 320px (iPhone 5/SE)
- 中型手机: 375px (iPhone 6/7/8)
- 大型手机: 425px (iPhone 6/7/8 Plus)
- 小型平板: 768px (iPad Mini)
- 中型平板: 1024px (iPad)
示例：为不同尺寸的设备设置样式
/* 默认样式 */
.container {
padding: 20px;
}
/* 大于等于 768px 宽的设备，通常是平板或更大屏幕 */
@media (min-width: 768px) {
.container {
padding: 40px;
}
}
/* 大于等于 1024px 宽的设备 */
@media (min-width: 1024px) {
.container {
padding: 60px;
}
}
/* 大于等于 1200px 宽的设备 */
@media (min-width: 1200px) {
.container {
padding: 80px;
}
}在这个例子中，.container 类的内边距会随着屏幕宽度的增加而增加。
使用媒体查询时的注意事项
- 移动优先: 从最小的屏幕尺寸开始，然后逐步增加媒体查询来适配更大的屏幕。
- 性能: 尽量简化媒体查询中的规则，避免过多的重绘和重排。
- 测试: 在不同的设备和屏幕尺寸上测试你的网站，确保样式按预期工作。
媒体查询是响应式设计的核心，它允许你为不同的设备和屏幕尺寸提供优化的用户体验。