启动一个 CSS 站点但格式问题 [关闭]答案

【问题标题】：Starting a css site but format issues [closed]启动一个 CSS 站点但格式问题 [关闭]
【发布时间】：2015-06-14 05:58:22
【问题描述】：

该站点的链接在这里 progerdevs.co.nf 只是一个测试站点。当我在我的 android 上加载页面时，它显示得很糟糕，一切都到处都是。有谁知道它叫什么，所以当屏幕尺寸不同时它会改变？我还有很多东西要学：/ 通过更改我的意思是，例如图像全部垂直显示，顶部导航栏也显示。

【问题讨论】：

您正在寻找响应式设计。尝试使用 Bootstrap 之类的框架。
关于您问题的风格：我建议您将其格式设置得更正确，以便人们倾向于阅读整个内容并找到答案。考虑包括可以让回答者充分理解您的问题的图像:)

标签： html css css-float css-position css-transforms

【解决方案1】：

您一定是在谈论媒体查询。假设您想根据一组屏幕分辨率（例如（宽度）
320像素
768像素
1024像素

然后您必须为每个分辨率定义一个媒体查询，并将您想要适应的任何元素的所有 css 规则放入其中。示例：您想更改所有文档的字体大小：

@media screen and (min-width:0px) {
    body {
        font-size:10px;
    }
}

@media screen and (min-width:320px) {
    body {
        font-size:12px;
    }
}

@media screen and (min-width:768px) {
    body {
        font-size:14px;
    }
}

@media screen and (min-width:1024px) {
    body {
        font-size:16px;
    }
}

根据您设备的屏幕分辨率，字体大小会发生变化，因此您可以对任何 HTML 元素的任何属性执行相同操作。

或者您可以使用 Bootstrap，但这需要更深入的知识。

【讨论】：

问题是我正在使用引导程序，而邻里指南 /thumbnail 的行为真的很奇怪。当我缩小窗口时，这 3 个图像真的很顽固，从 3 个水平变为 3 个垂直，即使空间很大。我还为每张图片使用 col-md-4，我不确定这是否会影响它，但我想要的是：2 张图片变小并并排，然后是 1 张大图片波纹管

【解决方案2】：

是的，您最好遵循之前的答案，但这是一个快速的解决方案。添加此代码，它也可以正常工作

.jumbo2 .jumbotron {
  background-image:url(http://progerdevs.co.nf/elderly.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}

我只是去掉高度；

谢谢

【讨论】：