移动优先设计是一种设计策略，首先为移动设备设计，然后逐步增强以适应更大的屏幕。
移动优先的优势
/* 基础样式 - 移动设备 */
.container {
padding: 15px;
margin: 0 auto;
}
.nav-menu {
flex-direction: column;
}
/* 中等屏幕 */
@media (min-width: 768px) {
.container {
padding: 20px;
max-width: 720px;
}
.nav-menu {
flex-direction: row;
}
}
/* 大屏幕 */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* 超大屏幕 */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。
评论
请 登录 后发表评论