媒体查询(或针对移动端的布局/CSS)

媒体查询是 CSS3 的一个重要特性，它允许我们根据设备的特性，如视窗宽度，像素密度等，来应用不同的 CSS 规则。这在创建响应式设计的网站时非常有用，因为我们可以根据用户设备的屏幕大小来调整布局和样式。

例如，以下的 CSS 代码会将视窗宽度小于600px的设备的背景颜色设置为灰色：

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

针对移动端的布局/CSS，我们通常需要考虑的问题有：

1. 触摸友好：移动设备主要通过触摸来操作，所以我们需要确保所有的可点击的元素都足够大，且有足够的间距，以避免误点击。

2. 简洁的设计：移动设备的屏幕通常较小，所以我们需要保持设计的简洁，避免过多的元素导致界面显得拥挤。

3. 优化图片：移动设备的网络连接可能较慢，所以我们需要优化图片，减少页面的加载时间。

4. 流式布局：使用百分比、flexbox、grid 等技术来创建可以自适应屏幕大小的布局。

总的来说，媒体查询和针对移动端的布局/CSS 是现代前端开发中非常重要的技能。