[메모] 미디어 쿼리, flex
@import 'theme.css';
/* TODO */
@media only screen and (max-width: 992px) {
.SearchResult .item {
width: calc(100% / 3);
}
}
@media only screen and (max-width: 768px) {
.SearchResult .item {
width: calc(100% / 2);
}
/* modal 넓이 100% */
.ImageInfo .content-wrapper {
width: 100%;
}
/* 글씨 줄이기 */
.Banner .CatName {
/* display: flex; */
font-size: 0.8em;
}
}
@media only screen and (max-width: 600px) {
.SearchResult .item {
width: calc(100% / 1);
}
}
/* TODO dark mode 처리 */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--background-color);
color: var(--color);
}
}
/* flex TEST code */
#flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#flex-container > div {
min-height: 30px;
}
#flex-container > .flex-item {
flex: 1;
width: 100%;
border: 2px solid red;
white-space: nowrap;
text-overflow: ellipsis;
}
#flex-container > .raw-item {
flex: 5;
/* flex-basis: 100%; */
border: 2px solid green;
}
#flex-container > .raw-item2 {
/* flex: 100%; */
width: 5em;
/* flex-basis: 100%; */
border: 2px solid blue;
}
#flex-container > .raw-item3 {
flex: 100%;
/* flex-basis: 100%; */
border: 3px solid yellow;
}
#flex-container > .raw-item4 {
flex: 100%;
width: 5em;
/* flex-basis: 100%; */
border: 10px solid white;
box-sizing: border-box !important;
}
Author And Source
이 문제에 관하여([메모] 미디어 쿼리, flex), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@victor/메모-미디어-쿼리-flex저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)