我有一个所有内容都居中的网站。内容的宽度为 500px
。
我只关心要显示的内容(500 像素),装订线的多少并不重要。
对于桌面显示,我有以下 CSS 规则:
margin: 0 auto;
width: 500px;
应该应用什么内容区域才能在尽可能多的屏幕尺寸(即小至 320 像素)上完整显示?
最佳答案
要支持不同的屏幕尺寸,您应该使用百分比,而不是像素。但如果您更习惯使用固定宽度(使用像素),则可以使用媒体查询来实现。
.container { //start with the smallest screen width
width: 300px;
margin: 0 auto;
}
@media screen and (min-width: 40em) { // 640px
.container {
width: 500px;
}
}
但我建议您使用百分比而不是像素。希望你觉得这个有用。
关于css - 获得 500 像素宽的设计以在不同的屏幕尺寸上正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20736322/