图文响应Css

提问者：小点点

我有一个非常简单的代码，只是有一点文字和图片（与标题）旁边，它的工作很好的电脑。然而在电话上，它没有任何回应。我该怎么解决呢？在较小的屏幕中，图像是否在文本上方或实际上在文本旁边都无关紧要。

null

.about-image {
  /*position: relative;
  display: inline-block; /* Make the width of box same as image */
  float: right;
  z-index:1;
  margin-top: 75px;
  margin-bottom: 75px;
  margin-right: 30px;
  }
  .about-image .overlay {
    font-family: "Raleway", "";
    /*
    position: absolute;
    */
  bottom: 0px;
  left: 0px;
        background: rgba(0, 0, 0, 0.8);
        font-family: Arial,sans-serif;
        color: #fff;
        width: 100%; /* Set the width of the positioned div */
        height: 5%;
  }
  .overlay a {
    text-decoration: none;
    color: #fff;
    font-family: "Raleway", "";
    text-align: left;
  }
  .overlay a:hover {
    color: #941313;
    transition: linear .4s;
  }

  .further h1 {
    color: black;
    font-family: "Raleway", "";
    font-weight: bold;
    font-size: 40px;
    padding-top: 75px;
    padding-right: 10px;
    padding-left: 70px;
  
  }
  .further h2 {
    color: black;
    font-family: "Raleway", "";
    font-weight: bold;
    font-size: 38px;
    padding-right: 80px;
    padding-left: 70px;
  }

  .further {
    overflow: hidden;
  }
  @media screen and (max-width: 640px) {
  .about-image {
    justify-content: center;
    display: inline-block;
  }
  .further h1 {
    padding-top: 200px;
    display: inline;
  }
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Title</title>

 
  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

<div class="about-image">
      <img class="resist" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=376&q=80" width= "340px"
      height= "480px"/>
      <div class="overlay">
        <a href="about.html">Caption</a>
      </div>
    </div>

  <div class="further">
    <h1>
    Information written here</h1>
      <h2> ⇨ More Information </h2>
      <h2>  ⇨ More Information</h2>
      
  
    </div>

null

提前谢谢！

共1个答案

匿名用户

在使网站具有响应性时，您可能会考虑其他一些事情和框架。

1:使用Flexbox

CSS3柔性箱，或者更广为人知的是Flexbox，是CSS3中一种新的强大的布局方式。它为我们提供了一个为布局用户界面而优化的盒子模型。使用Flexbox，垂直居中，同高列，重新排序和改变方向是轻而易举的事。

资源:https://flexboxfroggy.com/

2:使用CSS-Grid

CSSGrid是CSS中最强大的布局系统。它为web带来了一个二维布局工具，具有将项目放置在行和列中的能力。网格在现代web设计中的重要性是很高的，因此这个新规范解决了许多在浏览器中布局元素的老问题。

资源:https://flexboxfroggy.com/

3:使用媒体查询

媒体查询是CSS3中引入的一种CSS技术。

只有当某个条件为真时，它才使用@Media规则来包含CSS属性块。

资源:https://developer.mozilla.org/en-us/docs/learn/css/css_layout/media_queries

4:使用引导程序

Bootstrap是最流行的HTML，CSS和JavaScript框架，用于开发响应性的，移动优先的网站。 Bootstrap是完全免费下载和使用的！ Bootstrap是一个框架，可以帮助您更快更容易地设计网站。它包括基于HTML和CSS的设计模板，用于排版，表单，按钮，表格，导航，模态，图像传送带等。。。这里有一些使用Bootstrap的额外原因:Bootstrap的响应CSS调整到手机，平板电脑和台式机。

资源:https://getbootstrap.com/

5:使用Foundation

Foundation也被计算在例外的前端框架中。它是一个超级响应的框架，用于创建无缝的设计，以创建网站，应用程序的web，移动和电子邮件模板。 Foundation是最容易学习的框架，因此新用户可以很容易地使用它。这个特殊的框架有许多组件，包括布局，导航，媒体，库容器等等。 Foundation还提供了一个特殊的插件列表，为开发人员提供了相应的选择。

资源:https://get.foundation/

小贴士:做网站的时候，尽量先做到移动化。即首先使网站响应移动视图，然后使其桌面。其背后的原因是，如果你先让它移动化，那么它在桌面上也很好看。但如果你先设计桌面，在移动端就不会好看。

希望有帮助