javascript - 动态网站宽度

<分区>

想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post .

关闭 8 年前。

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

最佳答案

您可以使用 CSS 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" />

多媒体查询:

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

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

设备宽度:

如果最大设备宽度为 480px(例如 iPhone 显示屏)，则将应用以下代码。注:max-device-width表示设备实际分辨率，max-width表示可视区域分辨率。

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

关于javascript - 动态网站宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25338858/

相关文章：

javascript - 使用指定的分隔符分割字符串，并替换某些部分