在不同屏幕分辨率上测试网页时如何调整网页大小以适应窗口？答案

【问题标题】：How to resize web page to fit windows when test web page on difference screen resolution?在不同屏幕分辨率上测试网页时如何调整网页大小以适应窗口？
【发布时间】：2016-09-16 22:08:43
【问题描述】：

在不同屏幕分辨率下测试网页时如何调整网页大小以适应窗口？

见 fiddle here 和下面的 sn-p：

<body style="overflow:hidden; margin:0">
  <div id="main">
    <div id="content" style=" text-align: center; ">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
      <img src="https://images.encyclopediadramatica.se/thumb/6/69/Business_cat_exploitable.jpg/200px-Business_cat_exploitable.jpg">
    </div>
    <div id="footer">
    </div>
  </div>
</body>

在 1280 x 800 像素分辨率下测试时

然后在 800 x 600 像素分辨率上进行测试

我想以这样的 800 x 600 px 分辨率显示，我该怎么做？

【问题讨论】：

在图片大小上使用 % jsfiddle.net/kzqu9s4s/1
@DaniP -- 你能告诉我在 img 大小上不使用 % 的方法吗？
无论如何你都需要使用 % ... 来响应。为什么不呢？
我必须像 Fiverr i.imgur.com/m5Azyie.jpg 一样调整我所有网页的大小，但 Fiverr 没有将图像设置为 % ？他们是怎么做的？
????像笏？笏调整大小？在哪里？

标签： javascript html css responsive-design responsive

【解决方案1】：

我会让 img 100% 宽。

<style>
    #main, #content, img { display: block; width: 100%; }
</style>

【讨论】：