Recent Posts
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
관리 메뉴

공부하자

반응형 웹(Responsive Web)과 모바일 해상도 본문

ETC

반응형 웹(Responsive Web)과 모바일 해상도

bluemoon527 2021. 1. 4. 18:02

반응형 웹(Responsive Web)

: 스마트 폰 발달에 따라 발달한 것으로 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지. 

 

 

반응형 웹과 적응형 웹 ?

반응형 웹은 하나의 페이지를 디스플레이 종류에 따라 크기가 자동으로 최적화

적응형 웹은 디스플레이의 사이즈에 따라 웹 페이지가 존재한다. 크게 PC, 탭, 모바일로 나뉘어 제작된다.

 

 

 

 

 

모바일 해상도를 확인 할 수 있는 사이트

screensiz.es/iphone-xs

 

Vendor object iPhone XS | Viewport Sizes and Pixel Densities for Popular Devices

Vendor detail view type Apple iPhone 8 Plus iOS 5.5 13.9 1080 1920 1080 401 100% MDPI 16 : 9 100 Vendor object 0 Phone Apple iPhone 7 Plus iOS 5.5 14.0 1080 1920 1080 401 100% MDPI 9 : 16 100 Vendor object 0 Phone Apple iPhone XR iOS 6.1 15.5 828 1792 828

screensiz.es

 

모바일 기기 대비 해상도가 더 높기 때문에 제작시 해상도를 참고하여 제작하여야한다.

예를 들어 아이폰 6 기준 '375px*667' 사이즈이나 지원하는 해상도는 두배인 '750*1334'를 지원한다.

해상도를 기준으로 디자인 작업 및 코딩 작업을 해야 기기에서 선명한 이미지를 확인 할 수 있다.

요즘엔 고해상도의 기기가 더 많아져 사이즈 대비 3배 높은 해상도를 지원하는 경우가 많아 이를 기준으로 작업하는 것이 좋다.

 

 

 

 

 

 

Comments