2012-05-24 11 views
-2

正确的球员,这里有一个讨论 -CSS媒体查询和Photoshop“切片和骰子”表

我创建一个网站与divs和HTML5标准。不过,由于屏幕分辨率的原因,我的网页只适合1440x900。我必须使用CSS媒体查询来调整页面大小以适合也就是说,一个800×600的桌面分辨率,但这里有一个想法:

  1. Photoshop中也做了同样的调整大小,但切片和切块表,没有其他代码或CSS调整是必要的。表格是否真的很糟糕,它可以帮助您自动调整每个分辨率(甚至是移动网站)的大小?

  2. 如果您的CSS媒体查询遇到有窗口浏览器屏幕的人,而不是全屏800 x 600分辨率浏览器,用户有768 x 560?这是否意味着您的CSS媒体查询需要定义该分辨率以适应窗口大小? (我在这里想说的是,我的媒体查询只适合具有320px,480px,600px,768px,1024px,1400px的定义尺寸的浏览器,没有其他值,这些值使屏幕正确显示。)

  3. 我目前正在使用CSS3媒体查询,但我必须定义大量的分辨率大小(宽度为320px,480px,600px,768px,1024px,1400px)。这真的有必要吗?

+0

这是如何没有用?如果我在这听起来很愚蠢,至少告诉我我哪里出错了。 –

回答

2
  1. Photoshop不帮你调整网站设计“自动对每一个分辨率”。事实上,随着事情的发展方向 - 几乎不可能知道未来的任何设备上会有什么样的分辨率。我相信Android操作系统现在有超过100种不同的分辨率。请记住,Photoshop是一个真正的图形程序。

  2. 虽然媒体查询利用断点的想法,但它们最好与流体设计的想法(使用百分比而不是固定宽度/尺寸)结合使用。你不应该真的需要定义一个媒体查询来适应每一个普通的显示器宽度。最好使用流体设计的原则,然后当事物在特定点或宽度上过于拥挤/间隔时,使用媒体查询(断点)更改布局/设计以适应屏幕/浏览器窗口的物理尺寸。

  3. 它可能是必要的,它可能不是。同样,这取决于你是否想要在某个时候改变你的设计。也许尝试设计一个只有百分比的网站来看看有什么可能,然后当事情变得丑陋或者看起来不漂亮时,在这些断点处插入一些媒体查询并调整浮点数和比例以满足您的需求。

+0

我明白你的意思。我开始一个基于代码本身的项目,而不是依赖于Photoshop。 –

1

Photoshop中不允许再你必须做手工尺寸的页面.. 和你的另一点媒体查询我有设计了很多网站的1周的CSS应用CSS一样

<body style="width:100%"> 
<div style="width:200px;"></div> 
<div style="width:200px;"></div> 
<div style="width:200px;"></div> 
<div style="width:200px;"></div> 
</body> 

这将自动调整所有设备桌面和移动设备上的所有内容。

+0

我实际上错过了这个部分,我的div因此而混乱,很好。 –

+0

如果有任何一个回答你的问题,那么请接受其他明智的回答你的问题仍然在未回答的问题中显示。 –

0

当您正在开发基于不同设备的应用程序时。它真的很好看960.gs而不是根据CSS媒体查询。即使它涉及一两天的学习曲线,它也使我们的生活更轻松。