开发网站时如何处理不同的屏幕分辨率/屏幕尺寸? [英] How to handle different screen resolution/screen size when developing a site?
问题描述
我想使用jQuery开发一个可在所有主要浏览器上使用的网站.我认为应该从基本布局开始(标题，带有内容的几个选项卡和页脚).我想知道如何创建此布局以支持不同的屏幕分辨率，屏幕尺寸或窗口尺寸.定义组件的宽度和高度时，我应该以像素/点/百分比为单位工作吗?有没有可以帮助我完成此任务的jQuery插件?谢谢！
I would like to develop a site using jQuery that will work with all major browsers. I thought to start with a basic layout (a header, a couple of tabs with content, and footer). I wonder how should I create this layout to support different screen resolution, screen size, or window size. Should I work in pixels / points / percents when defining width and height of the components ? Are there any jQuery plugins that can help me with this task ? Thanks !
推荐答案
有很多解决方案，但是这些解决方案主要取决于您希望通过网站共享哪种内容(例如，嵌入式视频或尺寸可能有限的图片)以及您要使用的外观.
There are a number of solutions to this problem, but they are primarily dependent on what kind of content you are wanting to share through the site (ie embedded videos or images which may have a finite size) and the look and feel you are going for.
对于在多种浏览器中和各种窗口大小下都能正常使用的Web版式，您应该查看液体版式".以下是一些有关这些布局的教程的链接.
For web layouts which work well in multiple browsers and across a wide range of window sizes, you should be looking at "Liquid Layouts". Below are a few links to tutorials about these layouts.
- Liquid layouts the easy way | Max Design
- Liquid CSS Layouts - Design Alternative to Table Based Websites
- Fixed Width Layouts Versus Liquid Layouts
您还可以使用Javascript(包括jQuery)基于窗口分辨率来调整样式/内容(例如，从较小的屏幕(如手机)的多列布局更改为单列布局).这称为自适应内容".
You can also use Javascript (including jQuery) to tweak the styling/content based on the window resolution (for instance, changing from a multi-column layout to a single-column layout for smaller screens, such as mobile phones). This is called "Adaptive Content".
这篇关于开发网站时如何处理不同的屏幕分辨率/屏幕尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
