Question

我已经研究了这个，但没有一个代码可以工作。我需要知道如何使网站适合任何屏幕分辨率。

Answer 1

这被称为responsive design，正是Twitter Bootstrap的发明。

我通常不会参考W3Schools，但their bootstap tutorial值得做。

Bootstrap的基础是他们的grid system。了解（教程大约1小时，实验大约1小时），您将解决大多数响应式设计问题。

然后，您应该尝试使用css @media查询。 Bootstrap使用它们，因此你应该（用于在不同大小的显示器上微调结果）。

要开始使用Bootstrap，您只需将相应的库包含在网页的头部即可。由于Bootstrap是基于jQuery构建的，因此您还必须包含jQuery库。因此，您网页的<head>部分应如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Your Domain</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="your site description goes here" />
    <meta name="keywords" content="search, keywords, go, here" />
    <meta name="robots" content="index,follow" />

    <link rel="icon" type="image/png" href="img/your_favicon.png?v=1" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

如何使我的网站适合所有屏幕分辨率

1 个答案: