반응형
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Using media queries
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
developer.mozilla.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Media Queries</title>
<style>
body{
background-color: green;
}
/* 최소 320~최대 640 화면이면 blue 아니면 green으로 변경 */
@media screen and (min-width:320px) and (max-width:640px){
body{
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>출처 : nomadcoder
반응형
'2020 > CSS' 카테고리의 다른 글
| gradient 추천 사이트 (0) | 2020.02.18 |
|---|---|
| 페이지에서 색상 변경 가능, 사이즈 확인 site (0) | 2020.02.17 |
| css animation @keyframes (0) | 2020.02.16 |
| CSS Transformations (0) | 2020.02.16 |
| CSS Transition (0) | 2020.02.16 |
꽃꽂이하는개발자