Responsive Web Design
Table of contents
RWD Introduction
What is Responsive Web Design?
makes your web page look good on all devices
▸ uses only HTML and CSS
Setting The Viewport
already explained in HTML Responsible
Size Content to The Viewport
좋은 사용자 경험을 위해 가로 스크롤을 항상 방지해야함
요소에 뷰포트보다 큰 fixed 가로값을 사용하지 말기
픽셀의 화면 크기와 너비는 장치마다 크게 다르므로 내용을 잘 렌더링하기 위해 특정 뷰포트 너비에 의존해서는 안됨
페이지 요소에 CSS 너비를 절대값으로 크게 설정하면 요소가 더 작은 장치의 뷰포트에 비해 너무 넓다 (대신 width : 100 %와 같은 상대 너비 값을 사용)
RWD Media Queries
What is Media Queries?
uses the @media rule to include a block of CSS properties only if a certain condition is true
요소를 기기에 따라 숨기거나, CSS를 변형시킬 수 있다.
Syntax
@media not|only mediatype and (expressions) { CSS-Code; }
또한 아래와 같이 다른 미디어에 따라 다른 스타일 시트를 적용할 수 있다
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
Media Types
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that “reads” the page out loud |
Media Queries Simple Examples
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
min-width : 브라우저의 가로값을 재는것
min-device-width : 디바이스의 가로값을 재는것
Media Query can check this
▸ width and height of the viewport ▸ width and height of the device ▸ orientation (is the tablet/phone in landscape or portrait mode?) ▸ resolution
Media Query with Grid View
전체화면을 12단으로 나눈 후 클래스를 미리 지정해주고 요소를 사용할 때 원하는 공간만큼 클래스를 넣어주는게 Grid View 기법 (부트스트랩과 흡사함)
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
위와같이 먼저 지정해 준 후, 기기에 따라 클래스를 준다
<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>
Typical Device Breakpoints
기기별 끊어야 하는 가로값
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientation: Portrait / Landscape
- Portrait : 세로값이 가로보다 클때
- Landscape : 가로값이 세로보다 클때
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
RWD Images
Width and Max Width
width : 원본보다 커지는 가로값
<img src="https://gekdev.github.io/assets/images/cat1.jpg" style="width:100%;">max-width : 원본보다 커지지 않는 가로값
<img src="https://gekdev.github.io/assets/images/cat1.jpg" style="max-width:100%;height:auto;">
!Note
비디오도 동일하게 작동함
Background Images
Picture Element
RWD Frameworks
W3.CSS
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Bootstrap
Recommended
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>