获得500px宽的设计，以便在不同的屏幕尺寸上正确渲染

Question

我有一个以所有内容为中心的网站。内容的宽度为500px。

我只关心内容（500px）是可见的，有多少阴沟无关紧要。

对于桌面显示器，我有以下CSS规则：

margin: 0 auto;
width: 500px;

应该应用什么内容区域以尽可能多的屏幕尺寸（即小到320px）完整显示内容区域？

Answer 1

要支持不同的屏幕尺寸，您应该使用百分比，而不是像素。但是如果你使用固定宽度（使用像素）更舒服，你可以使用媒体查询来实现这一点。

.container {  //start with the smallest screen width
    width: 300px;
    margin: 0 auto;
}

@media screen and (min-width: 40em) {  // 640px
    .container {
        width: 500px;
    }
}

但我建议您使用百分比而不是像素。希望您觉得这个有帮助。