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

标签 html css

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

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

最佳答案

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

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

简而言之,您可以支持各种分辨率,但需要做更多的工作。考虑您的受众并使其适合大多数人。

98% 的人拥有大于 1024 宽的显示器,所以您的老板是个异常(exception)。

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

关于html - 基于用户屏幕分辨率的网页尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11744140/

相关文章:

javascript - 使用 ng-click 和 ng-repeat 使表格单元格处于事件状态

html - 带有 CSS::before 的自定义复选框 - 在 Firefox/Edge 中不起作用

html - 中心对齐导航栏与 @media 查询在 Firefox 和 IE 中不起作用

html - 如何在 win8 html 和 javascript metro 应用程序中让 -ms-grid 自适应宽度布局?

javascript - 计算输入数量 onchange

html - 选择 ul li child 而不是孙子

c# - 使用 MS 捆绑的空捆绑

html - Material Design Lite - 工具提示定位

c# - 当光标位于浏览器底部时页脚向上滑动

css - 是否可以在 CSS 中使用字母间距水平对齐单个字符?