web/html & css

[CSS] 반응형 미디어 쿼리

<!DOCTYPE html>
<html>
	<head>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/css/bootstrap.css" rel="stylesheet">
        <link href="/css/bootstrap-responsive.css" rel="stylesheet">
	</head>
/* Large desktop */
@media (min-width: 1500px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

 

 

'web > html & css' 카테고리의 다른 글

[CSS] 미디어 쿼리, 뷰포트  (0) 2021.07.22
[CSS] 가변 그리드, 마진, 패딩, 폰트  (0) 2021.07.22
[CSS] em, rem 그리고 css의 단위들  (0) 2021.07.09
[CSS] position  (0) 2021.07.09
[Bootstrap] checkbox와 radio  (0) 2021.06.25