Question

所以，我会尝试保持这个简短。我正在尝试设计我的网站（它是100％原始的），当我把它给其他朋友查看时，图像和文字不是内联的，我不太确定我应该如何对抗这个，我已发布我的代码所以，如果有任何人可以伸出援手，我会很感激。感谢。

---＆GT;代码 - http://pastebin.com/8J2tqd8J

Answer 1

您所说的是响应式网站设计。

从使用CSS @media查询到使用vw或rem等响应式调整单元，有许多解决方案。

但是，为了让我们的生活更简单，有一个框架可以为我们完成所有繁重的工作 - Twitter的Bootstrap。只需在头标记中包含所需的库，然后开始使用它们的类名。

您要包含在<head> 中的要点（或者您可以在</body>标记 - 您的通话之前的底部粘贴js链接）：

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

当然，您仍然会在<head>中拥有其他内容，例如DocType，Title，您自己的样式表，您自己的js文件（如果需要）等。以上只是演示了如何引用来自在线CDN的所有必需库，无需在Web服务器上下载/安装任何内容。

不同屏幕上的网站大小

1 个答案: