HTML/CSS - 移动友好且易于调整大小

Question

我和我的同学正在想办法让这段代码完全适合移动设备。我们尝试使用 @media screen 但它没有用。我们希望通过 HTML 和 CSS 实现这一点。

HTML

    <!--List Content Start-->
    <div class="listcontent">
    <div class="listnumber">1</div>
    <div class="listtitle">This div tag emphasizes the title.</div>
    <div class="listpic"></div>
    </div>
    <br><br>
    <!-- List Content End-->

    <div class="listcontent">
    <div class="listnumber">2</div>
    <div class="listtitle">This div tag emphasizes the title.</div>
    <div class="listpic"></div>
    </div>

</div>

CSS

.listcontainer {
    width: 100%;
    height: 100%;
}

.listcontent {
    width: 500px;
    height: 400px;
    margin: auto;
    background-color: #F5EFEF;
    padding:5px;
}

.listnumber {
    width: 50px;
    height: 50px;
    float: left;
    background-color: #B33638;
    padding: 5px;
    color: white;
    font-size: 45px;
    text-align: center;
}

.listtitle {
    width: 425px;
    height: 50px;
    padding: 5px;
    float: right;
    background-color: #fff;
}

.listpic {
    width: 100%;
    height: 335px;
    margin-top: 65px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 1

这是我根据您的代码片段为您创建的修复程序: JSFiddle

.listcontainer {
  width: 100%;
  height: 100%;
}

.listcontent:first-child {
  margin-bottom: 40px;
}

.listcontent {
  max-width: 500px;
  min-width: 320px;
  width: 100%;
  height: 400px;
  margin: auto;
  background-color: #F5EFEF;
  padding: 0;
}

.titlewrapper {
  width: 100%;
}

.listnumber, .listtitle {
  display: inline-block;
}

.listnumber {
  width: 50px;
  height: 50px;
  background-color: #B33638;
  padding: 5px;
  color: white;
  font-size: 45px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.listtitle {
  height: 50px;
  line-height: 50px;
  padding: 5px;
  background-color: #fff;
  white-space: nowrap;
  width: calc(100% - 70px);
  max-width: 100%;
}

.listpic {
  width: 100%;
  height: 335px;
  margin-top: 65px;
}

<div>
  <!--List Content Start-->
  <div class="listcontent">
    <div class="titlewrapper">
      <div class="listnumber">1</div>
      <div class="listtitle">
        This div tag emphasizes the title.
      </div>
    </div>
    <div style="clear:both;" />
    <div class="listpic"></div>
  </div>
  <!-- List Content End-->

  <div class="listcontent">
    <div class="titlewrapper">
      <div class="listnumber">2</div>
      <div class="listtitle">
        This div tag emphasizes the title.
      </div>
    </div>
    <div style="clear:both;" />
    <div class="listpic"></div>
  </div>
</div>

好吧，让我们深入探讨一下，所有这些 CSS 和 HTML 更改的原因是什么？

1. 做点什么mobile responsive您需要考虑它需要具有的行为。关于元素宽度，一般的经验法则如下。

CSS 代码示例:

.some-wrapper-element {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
}

这会形成一个包装元素，例如您的 .listcontent在使用和不使用媒体查询的情况下变得响应。请注意我是如何在整个 CSS 中应用它来为需要随着页面大小调整而调整大小的元素提供动态宽度的。

1. 您的 HTML 布局背后需要多加考虑。您正在尝试水平对齐两个元素并使它们响应。我承认这不是一个直接且易于实现的解决方案，但有一些标准的东西需要注意:

   • 用于确保水平对齐的环绕元素。
   • 使元素保持一致的 CSS 规则，例如 display: inline-block或 float: left ，或组合...实现取决于适合您的方式。
   • 要水平对齐并响应的元素需要彼此相邻。这很重要，也是所有添加 CSS 代码的原因。在这里看到一个很好的引用: How to place two divs side by side where one sized to fit and other takes up remaining space?

2. 媒体查询...，我的经验法则是:x 元素是否需要以一种不能先用 CSS 样式完成的方式进行响应式更改？例如在某些屏幕宽度上隐藏/显示图像，那么您的答案是是的。否则，请首先考虑我们的布局，如何首先使其响应，最后如何对无法响应的内容使用媒体查询。

3. <div style="clear:both;" />放在那里的代码。它的存在只是为了帮助将 title 部分与 image 部分分开。这是我为您提供的另一种布局糖，因为它有助于保持内容就位并分离不需要混合的内容。太棒了!

4. line-height: 55px;这很简单:如果你在一个小元素中有文本(就像你拥有的那个)并且你希望它看起来很好，使用等于元素高度的 line-height 将它居中。我这样做只是因为我觉得它看起来不错，但是如果你认为它没有必要就改变它。

无论如何，如果您有任何问题，我希望这对您有所帮助。