2020/CSS
css media queries
꽃꽂이하는개발자
2020. 2. 16. 19:01
반응형
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
반응형