Question

这是我第一次尝试对响应式设计进行媒体查询，因此我只是初学者。我有一个名为＆＃34; skill-wrapper＆＃34;有4个divs称为＆＃34;技能＆＃34;排成一排，所以他们都在一条线上彼此相邻。当屏幕缩小到320px时，我希望4 divs基本上形成一个正方形，两个位于底部的顶部两个。当它达到320px时，所有4个divs仍然排成一行，并且正在包装div之外。当屏幕缩小到320px时，如何让它像我想要的那样形成一个正方形？

仅供参考我在媒体查询中输入的代码确实排列了＆＃34;技能＆＃34; divs我希望它的方式，但是当屏幕处于正常大小时，而不是当它缩小时。这就是我如何为我的媒体查询提出代码的方法。这是代码。

＆＃13;

.skills-container {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #e1e1e1;
  margin-top: 0;
  padding: 0;
  bottom: 0;
}
.title.second {
  color: black;
  text-align: center;
  margin-bottom: 0px;
  padding-top: 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 55px;
}
#underline-second {
  width: 500px;
  margin: 0 auto;
  border-bottom: 5px solid black;
  margin-bottom: 40px;
}
.skills-wrapper {
  position: relative;
  margin: auto;
  width: 1200px;
  height: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.skills {
  position: relative;
  width: 23%;
  height: 470px;
  margin-top: 10px;
  border-right: 4px solid black;
}
.skills.last {
  border: none;
}
.logo {
  width: 265px;
  height: 340px;
  margin-top: 10px;
}
.ion-social-html5 {
  text-align: center;
  font-size: 280px
}
.des {
  font-size: 25px;
  margin-top: 0px;
  color: black;
}
.ion-social-css3 {
  text-align: center;
  font-size: 280px
}
.ion-social-javascript {
  text-align: center;
  font-size: 280px
}
.ion-social-angular {
  text-align: center;
  font-size: 280px
}
@media all and (max-width: 320px) {
.skills-container {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #e1e1e1;
  margin-top: 0;
  padding: 0;
  bottom: 0;
}
.title.second {
  font-size: 18px;
  margin-bottom: 0;
}
#underline-second {
  border-bottom: 2px solid #0A0A0A;
  width: 200px;
  margin-bottom: 0
}
.skills-wrapper {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 500px;
}
.lang {
  font-size: 40px;
}
.skills {
  float: left;
  width: 50%;
  height: 50%;
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-right: none;
}
.des {
  font-size: 14px;
}
}

＆＃13;

<html>
<head>
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Carlos Elizondo</title>
  <link rel = "stylesheet" type = "text/css" href = "practice.css">
  <link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link rel = "stylesheet" type = "text/css" href = "css/animate.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<div class = "skills-container">
  <div id = "underline-second">
    <h1 class = "title second" id = "skills">Skills</h1>
  </div>
  <div class = "skills-wrapper wow bounceInUp" data-wow-duration="2s" data-wow-offset="280">
    <div class = "skills">
      <div class = "logo">
        <div class = "ion-social-html5 lang">
          <p class = "des">HTML5</p>
        </div>
      </div>
    </div>
    <div class = "skills">
      <div class = "logo">
        <div class = "ion-social-css3 lang">
          <p class = "des">CSS3</p>
        </div>
      </div>
    </div>
    <div class = "skills">
      <div class = "logo">
        <div class = "ion-social-javascript lang">
          <p class = "des">JAVASCRIPT</p>
        </div>
      </div>
    </div>
    <div class = "skills last">
      <div class = "logo">
        <div class = "ion-social-angular lang">
          <p class = "des">ANGULAR JS</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

＆＃13;

Answer 1

在处理流体设计时，应避免使用variable 2 category 1 category 2 Total variable 1 category 1 45 52 97 category 2 60 56 115 Total 105 107 211设置元素宽度样式，而应使用百分比单位。我还建议您在这种情况下使用variable 2 category 1 category 2 Total variable 1 category 1 45 52 97 category 2 60 56 116 Total 105 108 213属性而不是px。另一个建议是使用max-width代替width来避免移动设备出现问题。我稍微修改了你的代码：

min-height

height

Answer 2

我将代码放入jsfiddle并与

一起玩

短代码可以使这很简单，这是一篇使用它们的帖子：

Nesting [su-column] inside [row] to get them to align neatly

应该强制它进入正方形，你可以在小提琴上看到结果

Answer 3

这里是您需要使用的media query code，并且不包括@media screen and (max-width : 320px){}中仅选定属性的所有属性，您要更改屏幕分辨率为320px及更低。

@media screen and (max-width: 320px){

.skills-container{
        width: 100%;
        height: auto;
 }
.title.second{
   font-size: 25px;
  }   
  #underline-second{
    width: 100%;
    border-bottom: 5px solid black;   
}
.skills-wrapper{
    width: 100%;
    height: auto;
 }
.skills{
    border-right: 4px solid yellow;
}

.skills.last{
    border: none;
}


.logo{
    width: auto;
    height: 340px;
    margin-top: 10px;
}

.ion-social-html5{
    text-align: center;
}

.des{
    font-size: 20px;
    word-wrap:break-word;
}

}

选中此jsFiddle

Answer 4

这必须是你真正需要的。 codepen.io

或者你可以在你的sublime中插入它并检查这个实际是否;

Submit()

css媒体查询为什么内容显示在div之外？

4 个答案: