CSS中如何处理不同的屏幕分辨率?

发布于 2024-10-14 00:20:08 字数 87 浏览 3 评论 0原文

我是 UI 设计新手 - 想知道在定位各种 HTML 元素时处理不同屏幕分辨率的最佳方法是什么? 我认为使用 %ages 会是前进的方向,但事实证明并非如此!

I am new to UI design- was wondering what the best way to deal with different screen resolutions is when positioning various HTML elements?
I thought using %ages would be the way forward but turns out it isn't!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

仅此而已 2024-10-21 00:20:08

首先看看这是否适合你。
用此替换您的标签

现在如果是,则实现此 onload。这将减少 100% 的麻烦,并且可以快速破解具有 1366 x 768 屏幕的笔记本电脑,而不会损坏更新、更大和更好的屏幕的外观和感觉

var screenHeight = screen.height;
if (screenHeight < 800) {
  $('body').css('zoom', 0.8);
} else {
     $('body').css('zoom', 1);
}

First see if this works for you.
replace your tag with this

Now if does, than implement this onload. This will reduce 100% of your headaches and will do a quick hack for laptops with 1366 x 768 screens without damaging the look and feel for newer, bigger and better screens

var screenHeight = screen.height;
if (screenHeight < 800) {
  $('body').css('zoom', 0.8);
} else {
     $('body').css('zoom', 1);
}
遗弃M 2024-10-21 00:20:08

您应该看看液体布局。这涉及根据用户浏览器大小扩展或收缩网页 -

http://www. maxdesign.com.au/articles/liquid/

http://www.alistapart.com/文章/负利润/

You should take a look at liquid layouts. This deals with an expanding or contracting web page based on a users browser size -

http://www.maxdesign.com.au/articles/liquid/

http://www.alistapart.com/articles/negativemargins/

怪我入戏太深 2024-10-21 00:20:08

% 是正确的方法。如果你开始使用 Javascript 来检测分辨率并根据该分辨率调整设计,你的代码将很快变成美味的肉意大利面。

过去,我总是被告知要以 800x600 的最低分辨率进行设计,但现在我总是以 1024x768 作为最低分辨率。

如果没有更多有关设计的细节,恐怕我们无法提供更多帮助!

% is the correct way. If you start using Javascript to detect resolution and adjust design based on that your code is going to turn into tasty meat spaghetti very quickly.

Back in the day I was always told to design with a minimum resolution of 800x600, but nowadays I always go by 1024x768 as a minimum resolution.

Without more specifics about designs, we can't really help more I'm afraid!

风吹短裙飘 2024-10-21 00:20:08

检查 960grid,它是一个布局标准,可以被最常见的屏幕分辨率整除。

check 960grid it's a layout standard that's divisible by the most common screen resolutions.

数理化全能战士 2024-10-21 00:20:08

请阅读此处:http://www.smashingmagazine.com/2011/ 01/12/guidelines-for-responsive-web-design/

您对 @media 查询最感兴趣,特别是 max-width最小设备宽度

Have a read here: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

You'd be most interested in @media queries, particularly max-width and min-device-width

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文