What are some best practices on enabling a web application to support multiple resolutions? Specifically resolutions that are wide-screen vs. normal aspect ratio.
有关使Web应用程序支持多种解决方案的最佳做法是什么?特别是宽屏与正常宽高比的分辨率。
It doesn't seem like there is an easy answer - other than simply supporting a few fixed resolutions and using some absolute positioning to get the layout to work correctly.
它似乎没有一个简单的答案 - 除了简单地支持一些固定的分辨率和使用一些绝对定位,以使布局正常工作。
This of course gets even more difficult to make it cross browser.
这当然越来越难以跨浏览器。
Does anyone have any good resources of this problem?
有没有人有这个问题的任何好资源?
5 个解决方案
#1
You can always try to use a liquid layout structure where the width of your elements are scaled proportionate to how wide their browser window is.
您始终可以尝试使用液体布局结构,其中元素的宽度与浏览器窗口的宽度成比例。
here is a good article explaining different layouts including liquid layout.
这是一篇很好的文章,解释了不同的布局,包括液体布局。
http://www.maxdesign.com.au/presentation/liquid/
PS. the above mentioned site (maxdesign.com.au) is using liquid layout itself, so try and change the size of your browser when reading the article.
PS。上面提到的网站(maxdesign.com.au)本身使用的是液体布局,因此在阅读文章时请尝试更改浏览器的大小。
#2
One fast, simple, fairly robust way is to use a framework like Blueprint or 960gs to lay out the site. They're browser-independent so you don't need to worry about that, and they make most column layouts pretty easy.
一种快速,简单,相当健壮的方法是使用Blueprint或960gs这样的框架来布局网站。它们与浏览器无关,因此您无需担心这一点,并且它们使大多数列布局变得非常简单。
They both work on the idea of creating a fixed-size container somewhere between 900 and 1000 pixels wide for your content. Most people run in at least 1024x768 nowadays. If you need more width than that for your content, you're probably doing it wrong.
他们都致力于为您的内容创建一个900到1000像素宽的固定大小的容器。现在大多数人至少跑1024x768。如果您需要的宽度超过内容的宽度,那么您可能做错了。
The one area where ~960px might not work is mobile phones... but that's what mobile stylesheets are for, right?
~960px可能不起作用的一个区域是手机......但这就是移动样式表的用途,对吧?
#3
In Opera and Safari (esp. their mobile versions) you can use CSS3 media queries, which let you declare completely different styles for different screen resolutions.
在Opera和Safari(特别是他们的移动版本)中,您可以使用CSS3媒体查询,这可以让您为不同的屏幕分辨率声明完全不同的样式。
This can be emulated in other browsers using Javascript – Alistapart: Switchy McLayout
这可以使用Javascript在其他浏览器中模拟 - Alistapart:Switchy McLayout
#4
You can use percentages to set width and heights also, but this is also difficult sometimes.
您也可以使用百分比来设置宽度和高度,但有时这也很困难。
#5
You have two options here:
你有两个选择:
- Fixed Width Layout
- Flow Layout
固定宽度布局
Both have benefits and drawbacks, and in the end, it's a design decision as to which is the best choice.
两者都有利有弊,最终,这是一个设计决定,哪个是最佳选择。
#1
You can always try to use a liquid layout structure where the width of your elements are scaled proportionate to how wide their browser window is.
您始终可以尝试使用液体布局结构,其中元素的宽度与浏览器窗口的宽度成比例。
here is a good article explaining different layouts including liquid layout.
这是一篇很好的文章,解释了不同的布局,包括液体布局。
http://www.maxdesign.com.au/presentation/liquid/
PS. the above mentioned site (maxdesign.com.au) is using liquid layout itself, so try and change the size of your browser when reading the article.
PS。上面提到的网站(maxdesign.com.au)本身使用的是液体布局,因此在阅读文章时请尝试更改浏览器的大小。
#2
One fast, simple, fairly robust way is to use a framework like Blueprint or 960gs to lay out the site. They're browser-independent so you don't need to worry about that, and they make most column layouts pretty easy.
一种快速,简单,相当健壮的方法是使用Blueprint或960gs这样的框架来布局网站。它们与浏览器无关,因此您无需担心这一点,并且它们使大多数列布局变得非常简单。
They both work on the idea of creating a fixed-size container somewhere between 900 and 1000 pixels wide for your content. Most people run in at least 1024x768 nowadays. If you need more width than that for your content, you're probably doing it wrong.
他们都致力于为您的内容创建一个900到1000像素宽的固定大小的容器。现在大多数人至少跑1024x768。如果您需要的宽度超过内容的宽度,那么您可能做错了。
The one area where ~960px might not work is mobile phones... but that's what mobile stylesheets are for, right?
~960px可能不起作用的一个区域是手机......但这就是移动样式表的用途,对吧?
#3
In Opera and Safari (esp. their mobile versions) you can use CSS3 media queries, which let you declare completely different styles for different screen resolutions.
在Opera和Safari(特别是他们的移动版本)中,您可以使用CSS3媒体查询,这可以让您为不同的屏幕分辨率声明完全不同的样式。
This can be emulated in other browsers using Javascript – Alistapart: Switchy McLayout
这可以使用Javascript在其他浏览器中模拟 - Alistapart:Switchy McLayout
#4
You can use percentages to set width and heights also, but this is also difficult sometimes.
您也可以使用百分比来设置宽度和高度,但有时这也很困难。
#5
You have two options here:
你有两个选择:
- Fixed Width Layout
- Flow Layout
固定宽度布局
Both have benefits and drawbacks, and in the end, it's a design decision as to which is the best choice.
两者都有利有弊,最终,这是一个设计决定,哪个是最佳选择。