css - 为宽屏缩放网站

Question

我刚刚完成我的第一个网站，在我的 13 英寸 Macbook 上它看起来很适合移动设备。我已经设置了我的媒体查询来帮助响应方面的事情，它似乎运行良好。我的主要问题是在宽屏幕上，例如 iMac，尤其是 27"iMac，所有东西都会拉伸(stretch)以使用屏幕的整个宽度，因为我应该以百分比设置大部分内容。只是想知道让网站看起来最好的方法在更宽的屏幕上更好，当设备宽度超过 1500 像素时，我应该使用放大的媒体查询吗？或者我最好将包装器放在整个 body 周围，以便在更大的设备屏幕上显示？

谢谢大家

Answer 1

第一步是将整个内容(或仅内容部分)放入您定义的包装器 div 中

.content_wrapper {
  width: 100%; /* full width on screens up to 1440px */
  max-width: 1440px; /* content width limited to 1440 on large screens */
  margin: 0 auto; /* centers the container on screens above 1440 */
}