0
これはレスポンシブデザインのためのメディアクエリーを行う私の最初の試みですので、私はこれで初心者です。私は「スキルラッパー」と呼ばれるラッパーを持っています。このラッパーには、「スキル」と呼ばれる4 divsという行が並んでいるので、それらはすべて互いに隣り合っています。画面が320pxに縮小されるとき、私は4 divsが本質的に正方形を形成したいと思っています。それが320pxになると、すべてdivsはまだ一列に並んでおり、ラッパーdivの外に出ています。画面が320pxに縮小されたときのように正方形を作るにはどうすればいいですか？css mediaクエリなぜコンテンツがdiv外に表示されますか？
FYI私がメディアクエリーに入れたコードは、「スキル」divsの方法を整理していますが、それは縮んだときではなく画面が通常のサイズになっているときです。それで、私は自分のメディアクエリーのコードを思いついたのです。ここにコードがあります。流体設計を扱う場合
.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;
}
}<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>
。スキル・ラッパー** –
あなたはそれが '.skills-wrapper'に幅を固定したので。どのように見える？ – Ionut
ですが、その幅はメディアクエリの範囲外です。あなたはそれが元のCSSでもパーセンテージでなければならないと言っていますか？ –