网页尺寸基于用户的屏幕分辨率

Question

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

我意识到我可以在CSS中按百分比设置东西以解决这个问题。问题是网页根据我的设计尺寸有不同大小的图像。如何使我的网站的尺寸变得动态，而不会让图片的大小与它们一样大小。

Answer 1

您可以尝试媒体查询。

例如，像这样

 @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

Answer 2

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

一般情况下，网站不会针对非移动版本的不同分辨率制作不同的版本，并坚持常见的解决方案：通常为960宽。一旦你支持不同尺寸的图像，支持每个分辨率的额外复杂性通常是不值得的。

简而言之，你可以支持各种分辨率，但它还有很多工作要做。考虑一下您的受众，让它适合大多数人。

98％的人有超过1024宽的显示器，所以你的老板是奇怪的。

请参阅：http://gs.statcounter.com/#resolution-ww-monthly-201106-201206

Answer 3

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

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

Answer 4

是的，您可以通过CSS的 scale 属性扩展您的 html 部门（即HTML tag -whole网站所涵盖的区域）来实现此目的。  CSS提供名为scale的属性，可以缩放文档中任何元素的大小（宽度x高度）。

例如，

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

现在我们可以按照以下方式扩大分部的规模：

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

上面的代码会将除法的大小增加x1.5。 您可以使用CSS的此属性来扩展您网站的主标记（＆lt; html＆gt;），以根据屏幕大小调整大小。 下面给出的链接以非常彻底的方式描述了如何将此 scale 属性动态应用于您的站点。 这里看看这个。 http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html

Answer 5

尝试在head部分添加：＆lt; meta name =“viewport”content =“width = device-width”＆gt;