如何让我的div对手机更具响应性？

时间：2017-08-05 21:28:17

标签： html css responsive

如何让我的“认识我们的员工”页面对手机更具响应性？看起来不太好，将物品一直放到左边，剩下很多内容留在正确的位置。

我没有尝试太多，因为我真的不知道我能做什么。

Codepen：https://codepen.io/audn/pen/EvNMvO?editors=1100

CSS：

    .bg-white{
  background-color:white;
  height: 216px;
  border: 1px solid #ddd;
  width: 180px;
  display: inline-block;
  margin-top:20px;
  margin-right:20px;
  float:left;
}
.username{
  color:black;
  font-weight:900;
 }
.workspace{
  font-size:11px;
  color:#999;
}
.contact{
  background-color:#1798e5;
  display:inline-block;
  margin-top:12px;
  color:White;
  border-radius: .3em;
  padding: 6px 10px;
  font-size:13px;
  text-align:center;
}
.icons{
  font-size:16px;
  margin-top: 20px;
}
.contact:hover{
  background-color:#1765e5;
  cursor:pointer;
}
.avatar1{
  border-radius:999px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  border: 5px solid white;
  width:90px;
  height:90px;
}

HTML 

<div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
<!--
audn
--><div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
<!--
audn
--><div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
<!--
audn
-->

3 个答案:

答案 0 :(得分：1)

您可以使用媒体查询来提高您的HTML响应速度。使用屏幕宽度调整＆＃34; bg-white＆＃34;，类似＆＃34; margin-left：10％;宽度：90％＆＃34;，在手机中加载网站时（你用css设置屏幕大小）

在这里查看更多：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

答案 1 :(得分：1)

使用flex。

Codepen：https://codepen.io/pandalism1/pen/EvZKXm

JS Fiddle

＆＃13;
＆＃13; 
@media (max-width: 400px){
.bg-white {
    width: 100% !important;
}
}
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bg-white{
  background-color:white;
  height: 216px;
  border: 1px solid #ddd;
  margin: 10px;
  width: 200px;
}
.username{
  color:black;
  font-weight:900;
 }
.workspace{
  font-size:11px;
  color:#999;
}
.contact{
  background-color:#1798e5;
  display:inline-block;
  margin-top:12px;
  color:White;
  border-radius: .3em;
  padding: 6px 10px;
  font-size:13px;
  text-align:center;
}
.icons{
  font-size:16px;
  margin-top: 20px;
}
.contact:hover{
  background-color:#1765e5;
  cursor:pointer;
}
.avatar1{
  border-radius:999px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  border: 5px solid white;
  width:90px;
  height:90px;
}
＆＃13; 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
  <div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
  <div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
  <div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
  <div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
  <div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
</div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用bg-white类在3个div周围添加一个包装元素，例如一个部分。添加一个text-align：center样式，将3 .bg-white div放在其section容器中。

然后，添加一个media query，允许您在特定的屏幕/设备宽度上设置.bg-white div的样式。我们选择640px的任意宽度。

在此断点处，您可以将.bg-white div的宽度从原始宽度180px更改为100％并使它们显示：block而不是display：inline-block，以便它们占据整个宽度页面，每个将坐在它自己的行。

这些是您需要进行的CSS更改。

.bg-white {
  background-color:white;
  height: 216px;
  border: 1px solid #ddd;
  width: 180px;
  display: inline-block;
  margin-top:20px;
  margin-right:20px;
  /* float: left; */
 }

section {
  text-align: center;
}

/* place at the bottom of your CSS file, after all other rules */
@media (max-width: 640px) 
{
  .bg-white {
    width: 100%; 
    display: block;
  }
}

不要忘记将3 .bg-white div包装在section容器中，以便将它们置于此父容器中。

当您的用户在他们的计算机/笔记本电脑上查看您的网站时，这些更改将为您提供3个.bg-white div在其父容器中居中，并且将在移动设备上显示相同的标记但具有不同的移动优化样式（因为当设备宽度<= 640px时，媒体查询样式被拾取。

这些添加的CSS规则以及添加的section容器可以为您做的屏幕截图。

桌面 Desktop

移动 enter image description here

相关问题
最新问题