css - 获得 500 像素宽的设计以在不同的屏幕尺寸上正确呈现

Question

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

我只关心要显示的内容(500 像素)，装订线的多少并不重要。

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

margin: 0 auto;
width: 500px;

应该应用什么内容区域才能在尽可能多的屏幕尺寸(即小至 320 像素)上完整显示？

Answer 1

要支持不同的屏幕尺寸，您应该使用百分比，而不是像素。但如果您更习惯使用固定宽度(使用像素)，则可以使用媒体查询来实现。

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

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

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