Adr*_*n K 47 css aspect-ratio screen-resolution
回到当天,800 x 600是设计的屏幕分辨率 - 也许是640 x 480.然后是1024 x 768等,等等.
但后来情况变得更糟:现在我们不仅有不同的分辨率,还有不同的宽高比.
人们使用什么策略来适应当今不断扩大的屏幕尺寸和宽高比范围？
(顺便说一下 - 我只考虑笔记本电脑/台式机硬件,当然也有智能手机和平板电脑也要考虑.)
Yi *_*ang 31
我知道这会是一个有点争议的意见,但无论如何我都会说:不要
不要设计多种屏幕尺寸或宽高比.当然有一些例外:像Webmail客户端这样的重型Web应用程序肯定可以用更多的屏幕空间,并且可能足够灵活,以适应各种各样的屏幕尺寸.所述网站的移动版本具有更灵活的设计以适应令人难以置信的移动屏幕尺寸,对于具有高移动量的网站也是有帮助的.但是,如果你坚持使用所谓的"桌面网络",那么我认为我们可以说有95%的时间需要关注比屏幕大小,分辨率和宽高比更重要的事情.
首先,让我们轻松解决这个问题.我真的不明白,你为什么会那么关心宽高比-它不像我们关心的是多的"首屏"的废话了,我们呢？网络是一个垂直媒介 - 滚动将始终在网站中占有一席之地.拥有超过神奇600px线的所有东西都是愚蠢的.
接下来,屏幕分辨率/大小:再次,我发现很难防守.
拥有大屏幕的用户通常不会最大化他们的浏览器窗口,因为他们发现大多数网站都没有利用它们.当网络适应用户时,用户也适应网络.虽然你可以说这是一个鸡和蛋的问题,但事实仍然是网站通常是为最低的共同点而设计的. 我不是在捍卫这个立场,而是指出它是当前行业的主流趋势.
有些事情根本不适用于太高或太低的分辨率.例如,有一小部分宽度允许人们在屏幕上舒适地阅读.任何更长的时间以及眼睛到下一行的移动量都会很烦人.太低,文字显得狭窄.网络设计为分辨率中立的事实意味着,对于那些希望建立流畅布局的人来说,矛盾的并不多.min-height而max-height会有所帮助,当然,但更广泛的范围内,更多的困难,你会面对的问题.孤立元素,流离失所的图像,耗尽的背景等等,对于使用当今技术构建的真正灵活的网站来说是不可避免的.
所以我的观点是,处理多种分辨率的最简单方法是完全忽略它 - 使用当今的技术,无论如何都没有多少选项 - 并设计最低的共同点.
Nak*_*nch 17
注意高DPI设置
我认为今天前端Web开发面临的最未讨论的问题之一就是在高DPI系统上进行测试.每个人都学会了在不同的浏览器上进行测试和测试,但设计人员/开发人员还没有开始测试不同的DPI设置.
高(甚至低),DPI设置在缩放字体时会破坏设计但图像不会(可能发生),可能导致图像看起来模糊/模糊,绝对定位的对象可能不会出现在所需的位置(对CSS菜单来说将是毁灭性的.)如果没有别的,请在高DPI下测试你的图像并根据需要重新渲染它们.
直到最近,随着Windows 7的发布以及人们购买高分辨率显示器的电脑,这一直是一个问题.首先,Windows 7默认使用96DPI(这与使用72DPI作为标准的其他计算世界不同.此外,Windows 7将自动调整DPI设置,我看到DPI为正常值150%的人(Windows中96 DPI).
这是一个很好的链接,可以更详细地讨论这个问题:http://webkit.org/blog/55/high-dpi-web-sites/
一个伟大的跨浏览器网站设计与Web标准是目标,但不要忘记DPI测试.
Ste*_*ano 12
好吧,试着保持答案不要太久,这就是我的意思.
(A)始终从最可能使用的比率/分辨率开始
如果您的平均乔将在现代笔记本电脑或台式机上,他可能至少有1024x768(参考:w3schools elykinnovation),这可以给你大约一个可用的960px宽度(你可能想检查960grid系统 - 有一个自从我第一次写这篇文章以来,很多新的框架.如果您的用户更有可能从移动设备或平板电脑开始,那么请先了解一下.如果它是50%-50%,通常最好从小开始然后长大,例如.摇滚锤或基金会
(B)布局:流动与否？
如果您的网站可以从更大的宽度中受益,请从此分辨率开始选择流畅的设计.小心人眼不喜欢长线阅读文字,所以不要滥用流体设计; 经常坚持960px,利润率很高是可以接受的.如果你真的有更多的空间,你可能想要添加(javascript)一些额外的侧面菜单.但设计您的网站尽可能没有JS工作.
(C)其他决议
最后,是时候检查使用最少的分辨率仍然可以接受.
(D)其他装置,比率和材料
不同比率的选择并不多; 它通常意味着您在移动设备,ipad,AAA或类似设备上运行.
我的建议是......专门为这些设备设计.
在编写HTML时,请记住您将需要的内容并记住通过语义而不是设计来执行HTML.如果可以,请使用正确的HTML5语义标记.避免使用<bold>或类似标记,并正确使用要用CSS设置样式的标记和类.
使用框架!
但是你仍然可以为不同的设备制作一些不同的设计.您无需在同一设计中做出响应/响应/.
根据客户端,有几种方法可以提供不同的CSS; 你能行的:
您可以通过以下一些简单的规则轻松地为小型(例如移动)设备生成通用设计:1.流体布局能够适应非常小的宽度2.紧凑的页眉/页脚不会浪费太多空间3.很少,内容清晰每页'4.避免:过度效果,因为它们不适用于触摸设备!
如果您想更进一步,您必须检查各个设备的自定义项; 一个例子是iphone视口,请参阅 apple ref库.
这只是为了让你开始.经验和具体需求将推动其余的!
您的网站无法完美地适用于每个显示器.即使你在一天中有足够的时间(或者我应该说一年/十年),为每一个可能的展示设计,你必须每次有新的设备出来的时间做一遍.
在我的开发中,我仍然虔诚地试图避免水平滚动,这对于浮动div/variable-width div来说并不太难.但除此之外,我们真正处于"那里有一个应用程序"的十字路口,你需要一个专门为特定设备设计的显示器.
我使用的一个策略是减少对单个显示器的依赖 - 客户可能不需要看到整个网页来执行他们的操作.您可以将功能解析为更小/更简单的网页,这些网页可以在不同大小的设备上进行更好的扩展.
在工作中,我有一点点更多的"权力",因为它是 - 我可以开发内部Web应用程序被"设计上运行...一些特定的浏览器,某些特定的显示设置,等等 - 使用其它配置在你自己的风险".这,只得到了经理后,同意花费额外的一周中发展(甚至升级/日后的维修更)只是为了安抚,在校园的另一端谁拒绝使用IE浏览器实际上是一个素食主义者是不值得的成本.在这种情况下,我们需要另一个Timmy,而不是一个更灵活的网络应用程序,可以在他最喜欢的非IE浏览器上看起来很好.