动态网站宽度答案

【问题标题】：Dynamic Website Width [closed]动态网站宽度
【发布时间】：2014-08-16 09:36:11
【问题描述】：

如今，人们使用各种屏幕尺寸来查看网站。我需要弄清楚如何设置一个动态的网站宽度，它可以随着屏幕大小自动改变。我创建了一个 1200px 宽的网站。网站和内容对于我的笔记本电脑屏幕来说太大了。但它更适合我的另一台显示器，因为它的尺寸很大。我可以调整该宽度以随用户的显示器尺寸动态变化吗？

【问题讨论】：

【解决方案1】：

您可以为此使用CSS media queries。（注意：旧版本的浏览器不支持）

Media Queries 是一个 CSS3 模块，允许内容渲染适应屏幕分辨率等条件（例如智能手机屏幕与计算机屏幕）。

更具体地说，它将查看以下内容：

CSS2 允许您为特定媒体类型（例如屏幕或打印）指定样式表。现在 CSS3 通过添加媒体查询使其更加高效。

您可以将表达式添加到媒体类型以检查某些条件并应用不同的样式表。例如，您可以拥有一个用于大型显示器的样式表和一个专门用于移动设备的不同样式表。

它非常强大，因为它允许您在不更改内容的情况下针对不同的分辨率和设备进行定制。

示例：

如果查看区域小于 600 像素，将应用以下 CSS。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

如果要链接到单独的样式表，请将以下代码行放在<head> 标记之间。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

多种媒体查询：

您可以组合多个媒体查询。如果查看区域在 600px 和 900px 之间，将应用以下代码。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

设备宽度：

如果最大设备宽度为 480 像素（例如 iPhone 显示屏），则将应用以下代码。注意：max-device-width表示设备的实际分辨率，max-width表示可视区域分辨率。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

【讨论】：