css3 设定宽度 手机端 PC端

CSS3允许我们为不同的设备和屏幕尺寸设置响应式设计，特别是在设定宽度时，为了实现手机端和PC端的兼容性，通常会采用以下几个策略：

1. **百分比宽度**：使用`width: %`可以让你的元素根据其容器的宽度动态调整。这适用于需要自适应布局的情况，比如栅格系统。

.container {
   width: 80%; /* 80% 容器宽度 */
}

2. **媒体查询**：通过@media规则，可以根据设备视口的宽度应用不同的CSS样式。例如：

/* 当视口宽度小于600px时（如手机） */
@media (max-width: 600px) {
   .element {
      width: 100%;
   }
}

/* 当视口宽度大于600px时（如桌面电脑） */
@media (min-width: 600px) {
   .element {
      width: 75%; /* 或者其他值 */
   }
}

3. **流体布局**：针对移动设备，还可以使用`flexbox`或`grid`布局，它们能够轻松地处理不同设备间的响应式宽度。

4. **固定宽度 vs 自适应**：对于某些非关键区域，可以选择在大屏幕下保持固定宽度，而在小屏幕上隐藏或缩放。比如设置`max-width`而非`width`.

.element {
   max-width: 960px; /* 可以是一个推荐的桌面宽度 */
   width: auto;
   margin: 0 auto; /* 在响应式布局中居中 */
}