0

现在我已经确定了我希望我的网站的外观，我需要一种方法让它在任何屏幕分辨率上看起来都很好。为了让我的生活更轻松，我在设计时设置了静态尺寸。尺寸设置为 1040x690。在家里我使用 1920x1080 分辨率，而我老板的笔记本电脑是 800x600。该网站看起来太大或太小。

我意识到我可以在我的 CSS 中设置百分比来解决这个问题。问题是网页上的图像根据我的设计尺寸大小不同。如何使我的网站的尺寸动态化，而不会因为图片的大小使其看起来很糟糕。

4

5 回答 5

2

您可以尝试使用媒体查询。

例如，像这样

 @media only screen and (max-width: 1023px) and (min-width: 768px) {
         div#container {width: 768px;}

        }

试试这个链接

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries http://www.danstorm.com/dan-storm-article-css-15.html

于 2012-07-31T15:55:40.267 回答
2

这称为响应式设计，通常用于重新格式化移动设备的布局。不同尺寸的格式化通常使用媒体查询来完成，媒体查询根据用户的屏幕尺寸应用不同的样式表。

一般来说，网站不会为非移动版本的不同分辨率制作不同的版本，而是坚持常用的分辨率：一般为 960 宽。一旦您开始支持不同尺寸的图像，支持每种分辨率所增加的复杂性通常是不值得的。

简而言之，您可以支持各种分辨率，但工作量要大得多。考虑你的听众，让它为大多数人服务。

98% 的人都有一台大于 1024 宽的显示器，所以你的老板是个奇怪的人。

见： http: //gs.statcounter.com/#resolution-ww-monthly-201106-201206

于 2012-07-31T15:59:34.967 回答
1

您可以使用名为 Foundation 的 CSS 框架和原型设计。您可以在以下 URL 找到它：http: //foundation.zurb.com/

它将为您的网页提供灵活且易于使用的设计，适用于许多设备和分辨率。

于 2012-07-31T15:57:02.683 回答
1

是的，您可以通过CSS 的scale属性缩放您的html分区（即 HTML 标记覆盖的区域 - 整个站点）来做到这一点。CSS 提供名为 scale 的属性，可以缩放文档中任何元素的大小（宽 x 高）。

例如，

<div id ="t_div"></div>


现在我们可以按如下方式缩放分区的大小：

#t_div { -moz-transform:scale(1.5,1.5); //for Firefox }

上面的代码会将除法的大小增加 x1.5 。您可以使用 CSS 的此属性来缩放您网站的主要标签（<html>），以根据屏幕大小调整大小。下面给出的链接以非常详尽的方式描述了如何将此比例属性动态应用于您的站点。这里看看这个。http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html

于 2014-01-10T18:58:25.903 回答
-1

尝试在头部添加这个：<meta name="viewport" content="width=device-width">

于 2012-07-31T15:56:37.287 回答