不同屏幕上的网站大小答案

【问题标题】：Website sizes on different screens不同屏幕上的网站大小
【发布时间】：2016-09-10 17:36:18
【问题描述】：

所以，我会尽量保持简短。我正在尝试设计我的网站（它是 100% 原始的），当我将它提供给其他朋友查看时，图像和文本不是内联的，我不太确定应该如何解决这个问题，我已经发布了我的代码因此，如果有人可以伸出援助之手，我将不胜感激。谢谢。

---> 代码 - http://pastebin.com/8J2tqd8J

【问题讨论】：

请添加您拥有的 HTML。

标签： html css image web alignment

【解决方案1】：

你说的是响应式网站设计。

有许多解决方案，从使用 CSS @media 查询到使用响应式大小单位，如 vw 或 rem。

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

Here is a great introduction 了解它的工作原理。

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

<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 的库，无需将任何内容下载/安装到您的网络服务器上。

【讨论】：

我已经添加了这些头部标签，但是我想知道是否需要 CSS 链接？正如我已经为我的整个网站和引导程序设计了一种丢弃/合并我的样式。我尝试从引导程序中删除 CSS 标签，但它使网站有点偏离测量值。 baseframe.co/a - 如果您看这里，在移动设备上（或者如果您缩小窗口），div 文本会有点疯狂。
如果引导样式表在之前您的样式表被引用，那么任何同名样式都将被您的样式表覆盖。这是一种常见的情况，我们中的许多人根据需要在这里和那里重写引导样式。是的，Bootstrap 样式表绝对是必需的。