궁금한건데요
max-width로 반응형을 처리하기를 배웠는데
1200px 이상 넘어가는 pc도 많은데 현직자들은 어떻게
그냥 default
미디어쿼리에 넣지 않고
stylesheet에 스타일 지정해주나요>?
예를 들자면
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
/* default */
.container {
display: flex;
padding: 5vw;
}
.container-item {
width: 30%;
text-align: center;
}
.item-title {
font-weight: bold;
padding: 5px;
margin-bottom: 5px;
}
/* 테블릿 */
@media screen and (max-width : 1200px) {
.container {
flex-wrap: wrap;
}
.container-item {
width: 50%;
margin-bottom: 20px;
}
}
/* 모바일 */
@media screen and (max-width : 768px) {
.container {
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
}
.container-item {
margin-bottom: 40px;
}
}
-------------------------------style----------------------------------------
-------------------------------html----------------------------------
<body>
<div class="container">
<div class="container-item">
<div class="item-title">homework</div>
<div class="item-text">lorem ipsum</div>
</div>
<div class="container-item">
<div class="item-title">homework</div>
<div class="item-text">lorem ipsum</div>
</div>
<div class="container-item">
<div class="item-title">homework</div>
<div class="item-text">lorem ipsum</div>
</div>
<div class="container-item">
<div class="item-title">homework</div>
<div class="item-text">lorem ipsum</div>
</div>
</div>
</body>
