2012年优先布局宽度

时间:2021-11-03 20:08:26

I am working on new web app and still can't decide, what width of the layout I should choose. The app is based on Twitter Bootstrap's library and currently I use the Default grid system (with 12 columns), that has the width 1170px.

我正在开发一个新的web应用程序,但是还不能决定应该选择什么宽度的布局。该应用基于Twitter Bootstrap的库,目前我使用默认的网格系统(12列),宽度为1170px。

On the monitor (I assume most of the people have the resolution higher than 1280px on width) looks the app good, the same on my MacBook PRO, but I am making a worries about the users with a bit older laptops, where the width-resolution is mostly 1024px and the don't see whole layout (and will see the horizontal scrollbar).

监控(我假设大多数人分辨率高于1280 px宽)看起来应用好,同样的在我的MacBook PRO,但是我在担心有点旧的笔记本电脑的用户,在width-resolution大多是1024 px,看不到整体布局(并将水平滚动条)。

So, I would like to ask you about your opinion. Do you optimize already the layout for a resolution > 1280px or still you reflect the users with the res. 1024px and use in that case the width 960px for your layout?

所以,我想问一下你的意见。你是否已经对分辨率> 1280px的布局进行了优化,还是仍然使用res. 1024px来反映用户,并在这种情况下使用宽度为960px的布局?

4 个解决方案

#1


5  

You should use media queries to change the layout for smaller resolutions. In my workplace, there are several monitors that are 1024 pixels wide. Also, people often use tablets in portrait mode (which, IIRC, only has 1024 pixels). Sure, the person could turn their tablet sideways to see the whole thing, but many people won't either out of sheer laziness or not realizing it would solve the problem.

您应该使用媒体查询来更改较小分辨率的布局。在我的工作环境中,有几个显示器的宽度为1024像素。此外,人们经常在竖屏模式下使用平板电脑(IIRC只有1024像素)。当然,人们可以把平板电脑横着看,但很多人不会因为纯粹的懒惰或者没有意识到它会解决问题。

If you only want to design for one resolution (read: you should not do this), then I wouldn't suggest anything larger than 1024 pixels wide. For some statistics, roughly 15-20% of our website's traffic uses monitors that are 1024 pixels or less wide.

如果您只想设计一个分辨率(读:不应该这样做),那么我不会建议您使用任何大于1024像素的宽度。对于一些统计数据,大约15-20%的网站流量使用的是1024像素或更宽的显示器。

It should also be noted that even for users with monitors 1280 pixels wide or wider, many users do not maximize their browser windows. This is especially common with Mac users, but can also be found with Windows/Linux users.

还应该注意的是,即使对于屏幕宽度为1280像素或更宽的用户,许多用户也不会最大化他们的浏览器窗口。这在Mac用户中尤其常见,但也可以在Windows/Linux用户中找到。

#2


1  

According to W3Counter's Global Stats 15% of monitors are at 1024x768 and 56% have at least a width of 1280px. I think 15% is still too high to go with 1170px as a layout.

据W3Counter的全球统计,15%的显示器的宽度为1024x768, 56%的显示器的宽度至少为1280px。我认为15%还是太高了,不能用1170px作为布局。

#3


1  

Personally, I develop for 1024px and up for desktops. I use media queries to detect mobile devices and provide an alternative layout.

就我个人而言,我为桌面开发了1024px和up。我使用媒体查询来检测移动设备并提供另一种布局。

As SupremeDud states in his answer, 15% of displays are still 1024x768, which is a reasonably large market share.

在他的回答中,15%的显示器仍然是1024x768,这是一个相当大的市场份额。

In terms of a pixel width, I base designs around 960px. You might want to look at 960.gs, although I'm not sure how it will work with Bootstrap.

就像素宽度而言,我的基本设计是960px左右。你可能想看看960。虽然我不确定如何使用Bootstrap。

#4


1  

How about liquid or responsive layout? That way you can cover all resolutions and window sizes.

液体布局还是响应式布局?这样你就可以覆盖所有的分辨率和窗口大小。

#1


5  

You should use media queries to change the layout for smaller resolutions. In my workplace, there are several monitors that are 1024 pixels wide. Also, people often use tablets in portrait mode (which, IIRC, only has 1024 pixels). Sure, the person could turn their tablet sideways to see the whole thing, but many people won't either out of sheer laziness or not realizing it would solve the problem.

您应该使用媒体查询来更改较小分辨率的布局。在我的工作环境中,有几个显示器的宽度为1024像素。此外,人们经常在竖屏模式下使用平板电脑(IIRC只有1024像素)。当然,人们可以把平板电脑横着看,但很多人不会因为纯粹的懒惰或者没有意识到它会解决问题。

If you only want to design for one resolution (read: you should not do this), then I wouldn't suggest anything larger than 1024 pixels wide. For some statistics, roughly 15-20% of our website's traffic uses monitors that are 1024 pixels or less wide.

如果您只想设计一个分辨率(读:不应该这样做),那么我不会建议您使用任何大于1024像素的宽度。对于一些统计数据,大约15-20%的网站流量使用的是1024像素或更宽的显示器。

It should also be noted that even for users with monitors 1280 pixels wide or wider, many users do not maximize their browser windows. This is especially common with Mac users, but can also be found with Windows/Linux users.

还应该注意的是,即使对于屏幕宽度为1280像素或更宽的用户,许多用户也不会最大化他们的浏览器窗口。这在Mac用户中尤其常见,但也可以在Windows/Linux用户中找到。

#2


1  

According to W3Counter's Global Stats 15% of monitors are at 1024x768 and 56% have at least a width of 1280px. I think 15% is still too high to go with 1170px as a layout.

据W3Counter的全球统计,15%的显示器的宽度为1024x768, 56%的显示器的宽度至少为1280px。我认为15%还是太高了,不能用1170px作为布局。

#3


1  

Personally, I develop for 1024px and up for desktops. I use media queries to detect mobile devices and provide an alternative layout.

就我个人而言,我为桌面开发了1024px和up。我使用媒体查询来检测移动设备并提供另一种布局。

As SupremeDud states in his answer, 15% of displays are still 1024x768, which is a reasonably large market share.

在他的回答中,15%的显示器仍然是1024x768,这是一个相当大的市场份额。

In terms of a pixel width, I base designs around 960px. You might want to look at 960.gs, although I'm not sure how it will work with Bootstrap.

就像素宽度而言,我的基本设计是960px左右。你可能想看看960。虽然我不确定如何使用Bootstrap。

#4


1  

How about liquid or responsive layout? That way you can cover all resolutions and window sizes.

液体布局还是响应式布局?这样你就可以覆盖所有的分辨率和窗口大小。