responsive web

목차

• responsive web
• view port
• meta name="viewport"

---

 responsive web

반응형 웹 : 한가지의 웹사이트로 다양한 종류의 기기에 반응하여 최적화된 화면을 보여주는 웹을 뜻함

 

모바일 웹과의 차이는,

모바일 웹이 PC버전의 웹과 모바일 버전의 웹을 따로 제작한다면,

반응형 웹은 하나의 웹만 제작하면 모든 기기에서 최적화된 화면으로 볼수있음

 

반응형 웹의 단점은, 디자인 자유도가 떨어지고,

로딩속도가 느려지며, 로딩속도를 높이기위해 콘텐츠의 양과 질이 떨어질 수 있음

---

 

 view port

웹 브라우저에서 실제 내용이 표시되는 영역을 뜻함

width와 height값을 viewport크기의 비율로 지정해줄수 있음

1당 viewport의 1%를 의미함

ex) width : 100vw (viewport가로크기의 100%)

      height : 100vh (viewport세로크기의 100%)

viewport를 줄인모습

viewport를 키운모습

div { 
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 255, 0.356);
    text-align: center;
    font-size: 5vw;
    font-weight: 900;
    color: white;
}

<div>Hello HTML!</div>

---

 

 meta name="viewport"

user-scalable : 사용자 확대/축소 가능 여부( yes 또는 no)

initial-scale : 초기 화면 비율

maximum-scale : 최대 확대 화면 비율

minimum-scale : 최소 축소 화면 비율

<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=2.0, initial-scale=1.0">

---

 

Github

Link