使用媒体查询和百分比宽度实现响应式设计，可解决手机端网页错位问题。1. 通过@media screen and (max-width:768px)设置小屏专用样式；2. 使用width:100%、max-width和box-sizing:border-box确保元素自适应；3. 图片设max-width:100%，字体用rem或vw单位；4. 在小屏下隐藏侧边栏、居中标题提升体验。核心是让布局流动适配，而非固定尺寸。
手机端网页显示错位，通常是因为布局没有适配小屏幕。解决这个问题的核心方法是使用CSS中的媒体查询（media query）和百分比宽度来实现响应式设计，让页面在不同设备上都能正常显示。
使用媒体查询适配不同屏幕
媒体查询可以根据设备的屏幕宽度应用不同的CSS样式。比如针对手机常见的屏幕尺寸（小于768px），你可以设置专门的样式规则：
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
.header, .footer {
text-align: center;
}
.sidebar {
display: none; /* 手机端隐藏侧边栏 */
}
}
这样当屏幕宽度小于等于768px时，容器自动占满全屏，布局更紧凑，避免横向滚动或元素错位。
用百分比代替固定宽度
如果使用width: 960px;这类固定值，在小屏幕上很容易溢出。改用百分比可以让元素根据父容器自动缩放：
-
width: 100%;—— 元素填满父容器 -
max-width: 600px;—— 限制最大宽度，防止在大屏拉伸变形 -
box-sizing: border-box;—— 包含padding和border在宽度内计算，避免意外溢出
例如：
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
图片和字体也要响应式
除了布局，图片和文字也需要适配小屏幕：
- 图片设置
max-width: 100%;防止撑破容器 - 字体大小可用
rem或vw单位，随屏幕调整 - 在媒体查询中适当缩小标题字号，提升可读性
示例：
img {
max-width: 100%;
height: auto;
}
h1 {
font-size: 2rem;
}
@media (max-width: 480px) {
h1 {
font-size: 1.5rem;
}
}
基本上就这些。通过合理使用media查询和弹性单位，大多数手机端错位问题都能解决。关键是让布局“流动”起来，而不是死板地固定尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
