24

我正在构建一个包含全宽滑块的网站；100% 的浏览器窗口。CSS会是这样的

.slider {
    width:100%;
}

...滑块的父级在哪里<body>，而不是一些包装器 div。

我的困境是，如果我使用宽度为 1600 像素的图像，并使用 CSS 将其缩放到 100%，那么对于最大化浏览器（显示器宽度）小于 1600 像素的任何人来说，这都可以，因为图像将被缩小而不是放大（暂时不考虑移动/响应大小的考虑）但是在非常大的显示器上使用最大化浏览器的人会使图像放大而不是缩小，因此它的外观会略有下降。

我检查了几个滑块，它们使用的图像宽度约为 2000 像素，但是否存在不需要在大部分显示器上放大的宽度？

请注意：我不是在问 CSS、网格系统、twitter Bootstrap、响应式或自适应网站、960 像素宽度的网站或类似的东西。我也不是在谈论 100% 的网站包装器的滑块。我只是询问用于创建滑块的图像文件的像素宽度，该滑块缩放为浏览器宽度的 100%。

4

6 回答 6

23

1920px 是你想去的最高点。这被认为是屏幕分辨率尺寸的“高端”，任何更高的东西都会使浏览器发挥作用。只要您将幻灯片宽度设置为 100%，它将毫无问题地调整为分辨率高于 1920 的屏幕尺寸。这也将解决占用过多带宽的问题，并且不会影响您的加载时间（这是您网站功能的关键）。

于 2012-06-25T17:34:31.563 回答
1

根据2013年全球屏幕分辨率统计，1920x1080的显示尺寸在当前十大流行屏幕尺寸中排名第四。这也是迄今为止显示器的最后一款高清显示器。

于 2014-01-02T21:25:19.447 回答
1

我认为这更像是一种个人选择，具体取决于您的目标受众。这些统计数据可能会帮助您做出明智的决定。http://www.w3schools.com/browsers/browsers_display.asp

于 2016-08-24T10:13:39.597 回答
1

赶上 2019 年的超大分辨率显示设备，我会推荐尺寸为 的2400x1600px、优化的 jpeg 或具有 jpeg 后备支持的下一代图像格式。

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

来源：
https ://flothemes.com/flothemes-image-sizes/
https://freshman.tech/image-optimisation/

您甚至可以更聪明地走很多步，并使用支持图像优化和响应式图像交付的 CDN，例如（提供免费层）https://cloudinary.com/或https://www.cloudimage.io

于 2019-11-12T23:09:49.827 回答
0

960px 是网页任何内容区域的标准全宽，希望在完整的浏览器窗口中没有任何溢出。

http://960.gs/

于 2012-06-25T17:30:10.560 回答
-1

正如上面已经注意到的，标准宽度是 960 像素。但是很多网站都是做自适应的，所以不能肯定。例如，我的显示器的分辨率为 2560x1440。没有人做出如此大的网站分辨率。

如果您想将自适应网站制作为显示器和移动设备，我只能建议使用twitter bootstrap或类似的东西。您还可以使用网格系统，例如：designinfluences。

于 2012-06-25T17:44:55.553 回答