css中宽度适应手机屏幕

CSS中宽度适应手机屏幕是网页设计中重要的一环，因为大多数用户通过手机或平板电脑访问网页。在不同的设备上浏览网页时，网页布局和宽度都应该是响应性的。

最简单的方法是使用百分比宽度。通过在CSS样式表中定义所需元素的宽度为百分比，可以确保元素的尺寸与浏览器窗口大小自动调整。

.example {
  width: 100%;
} 

除此之外，CSS网格布局也是一种流行的响应式设计方法。将网格视为多个单元格，然后使用CSS样式表定义每个单元格的宽度、高度和位置。这样，可以将页面分成多个网格区域，以便在各种设备上对页面进行优化。

.example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
} 

最后，CSS中的媒体查询也可以用于适应手机屏幕。使用媒体查询，可以根据设备的宽度来应用不同的CSS样式。当设备的宽度小于某个阈值时，可以使用CSS样式来缩小页面元素。

@media screen and (max-width: 480px) {
  .example {
    width: 50%;
  }
} 

总之，CSS中的宽度适应应该是每个网页设计师的必备技能。无论使用什么方法，都应该以用户为中心，优化页面布局和体验。