为响应行为设计样式

Question

我确定这对许多人来说都是婴儿用品，但我担心我无法做到这一点。我调整得越多，结果越远。无需描述我努力的后果。相反，这是视口缩小时所需的效果：

较低的图像不是我实际生产的图像;它是我想要发生的事情。相反，我已经让元素做了所有事情，但最令人讨厌的是图像下的文本包装。

如果有人可以指出我最有效的代码，包括媒体查询，我很感激。

Answer 1

我相信您在CSS中使用@media查询，因此除非另有说明，否则我会假设这一点。

你可以看到它的一种方式是：

将项目2＆amp;的display属性设置为inline-block。 3。

然后，设置项目2＆amp;的width。当视口宽度超过600px（桌面/平板电脑）时，3到50％。这将使他们并排坐下。

注意：您可能需要使用box-sizing: border-box;才能正常工作;取决于您是否使用边框。

然后，在您的媒体查询小于600px（移动设备）上，设置项目2＆amp; 3＆＃39; width到100%填充屏幕宽度。

这将使它们整齐地层叠在一起。

此外，我建议使用Bootstrap，因为这会使响应式网站编码变得轻而易举。

希望这有帮助！

Answer 2

我认为这里的eassier解决方案是使用media queries。我给你一些背景知识，以防你不知道它们是什么。

创建样式表时，创建的样式将应用于使用选择器定位的元素，如类，ID等。

Media queries允许您为CSS规则设置条件，例如，您可以根据屏幕大小创建规则。

看看这个小提琴，检查它是如何工作的。

.short {
  width: 50%;
  float: left
}
@media screen and (max-width: 500px) {
  .short {
    width: 100%;
    float:none;
  }
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
  Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
  Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
  Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
  Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
  Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
  Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
  Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
  Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
  Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
  Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>

CSS很简单。第一件事是类short，它始终适用于元素。然后，您会找到media query，其中说明仅当width位于500px下时才会应用包含的CSS规则。

Answer 3

我在自适应网页上有一个项目，而且我是一名新学员，因此它是所有基础知识：

https://github.com/nirupaboricha/Responsive_Webpage

让我知道它是否有用。