Html 网页常用的像素大小及其优缺点

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6832609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:44:51  来源:igfitidea点击:

Commonly used pixel sizes for webpages and their pros/cons

htmlcssbrowsersizepixel

提问by Nachshon Schwartz

What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?

最常用的像素大小(主要是宽度)是什么,有什么优点和缺点?

How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?

我怎样才能最好地找到一种快乐的媒介来为拥有各种显示器尺寸的人提供良好的体验?

An answer with an explanation rather than just the size would be greatly appreciated.

一个有解释而不仅仅是大小的答案将不胜感激。

回答by meo

the most grids use a width of 960px. (When the design has a fixed width). When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106

大多数网格使用 960px 的宽度。(当设计具有固定宽度时)。当您查看全球统计数据时,1024 范围分辨率仍然是最常见的:http: //gs.statcounter.com/#resolution-ww-monthly-201006-201106

Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)

不要使用 1000 宽度。(您必须计算浏览器和滚动条的边框宽度,在某些浏览器/操作系统中它们比其他浏览器大)

I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/

我不认为有一个最终的分辨率,这就是为什么你应该检查相关网页上的统计数据(如果页面已经存在),以确定最合适的分辨率。如果您不能这样做,您可以在http://gs.statcounter.com/查看目标市场的统计数据

Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/

甚至更好地使用响应式网页设计:http: //www.alistapart.com/articles/responsive-web-design/

Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.

由于 CSS 中的 max- 和 min-width 属性,您可以针对您想要的任何分辨率,当然,如果您有时间/预算的话。

回答by Jeremy Wiggins

960px width is a good standard, as others have already elaborated on.

960px 宽度是一个很好的标准,其他人已经详细阐述过。

However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.

然而,人们应该记住,网站都在大量观看不仅仅是台式机,这些天,所以答案可以基于该网站被风格化什么变化。例如,对于移动样式表来说,960px 的宽度是很差的。

One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)

一种可以帮助您的资源是www.resizemybrowser.com。(Firebug 中内置了一个类似的工具。)

At the end of the day, I think 960px is a good standard, but really, "it depends". :)

归根结底,我认为 960px 是一个很好的标准,但实际上,“这取决于”。:)

回答by Stan

960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.

960 是固定宽度网站的标准。这是为了确保 1024x768 分辨率可以轻松拾取。至于高度 - 这并不重要。

回答by Stan

In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px(because there's no 800*600 resolution anymore and the least you can find is 1024*768).

一般来说,对于固定宽度的网站,这意味着在计算机屏幕上阅读,现在,我会说大约 1000 像素(因为不再有 800*600 的分辨率,你能找到的最小分辨率是 1024*768)。

You should really aim for an extensible design (generally harder to do though).

你真的应该瞄准一个可扩展的设计(虽然通常更难做到)。

回答by Rami Sarieddine

Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto. and best to align the website in the center, via the css property margin: 0 auto;

根据经验,对于网络,我会说宽度大于 850 且小于 1000 像素,最好在 900 像素左右,高度约为 750 像素,但请记住,在动态内容的情况下,高度是可变的。所以高度可以设置为 100% 或自动。最好通过 css 属性将网站居中对齐margin: 0 auto;

回答by Treemonkey

The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)

最常见的尺寸在 900-1000 像素之间,有一些很好的屏幕尺寸使用来源,大多数人倾向于为最大的群体设计。主要是假设任何拥有 800 x 600 屏幕的人都不想做太多生意。即手头拮据(大概括)

回答by Jose Faeti

I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.

我不会只考虑桌面显示器的分辨率。如今,您几乎可以在任何设备上浏览网站,而且人们也用手机和平板电脑浏览网站是相当普遍的,因此您真的应该考虑两者。

This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.

这可能会导致针对不同设备的不同站点版本,或能够根据不同大小容纳的站点布局。这是您在第一次考虑您计划做的网站时必须考虑的事情,因为并非每个网站都适合具有这种类型的布局。

An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).

适应性布局还有一个额外的好处,即即使出现了具有自定义(非标准)分辨率的新设备,它也会很好,您不必担心在这些新设备中检查它,因为它会适合(如果布局是做对了)。

Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.

无论如何,我的桌面显示器的标准最小宽度仍然是 960 像素,对于适应性强的布局,我通常会为真正巨大的显示器选择最大宽度(想想在 2500x1600 显示器上查看一个扩展到整个显示器宽度的网站......天哪)大约 1200 像素,如果浏览器尺寸小于该尺寸,则宽度为 100%,以使网站适合任何地方。