width：100PC vs媒体查询

Question

我想为平板电脑，手机和桌面开发网页。但我很困惑使用什么，width:100%或媒体查询。哪一个最有用？

Answer 1

这完全取决于您想要做什么，如果您只是希望网站对调整大小做出反应，width: 100%会做您想做的事情，这通常称为Fluid Website

媒体查询的目的是在页面满足某些样式标准（如宽度，高度，设备像素比等）时显示，隐藏和以其他方式转换页面上的元素。这些通常称为Responsive Website。

媒体查询适用于显示和隐藏某些非移动友好的导航项目，页眉和页脚等，例如，如果某个网站在桌面上有一个大型幻灯片，这对于某人来说是一个非常讨厌的用户体验iPhone或类似设备;因此，一旦满足尺寸标准，我们就可以写下面的内容来隐藏它：

.myAwesomeSlideshow {
  display: block;
  width: 100%;
}

@media only screen and (min-width : 321px) {
  .myAwesomeSlideshow {
    display: none;
    visibility: hidden;
  }
}

我希望这会为你清理一下，我会亲自使用媒体查询，但任何一种解决方案都能很好地适用于你并具有相同的可维护性。请注意＆lt;不支持媒体查询。 IE9虽然。