【问题标题】: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 查询到使用响应式大小单位,如 vwrem

但是,为了让我们的生活更简单,有一个框架可以为我们完成所有繁重的工作——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>

当然,&lt;head&gt; 中还有其他内容,例如 DocType、Title、您自己的样式表、您自己的 js 文件(如果需要)等。上面只是演示了如何引用所有必需的来自在线 CDN 的库,无需将任何内容下载/安装到您的网络服务器上。

【讨论】:

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