반응형 웹 미디어 쿼리 분기 설정 & OS 브라우저 시장점유율

장치 별 해상도

https://screensiz.es/phone

브라우저 시장점유율 최신정보 사이트

https://www.netmarketshare.com

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

<!--뷰포트 메타 테그로 디바이스 장치 가로 길이 인식 -->

@-ms-viewport {
/*ie10 윈도우8 기기전용 반응형 디자인 적용*/
width: device-width;
}

@viewport {
width: device-width;
}

@media screen and (max-width: 480px) {
/*0px ~ 최고480px 까지*/
}

@media screen and (min-width: 481px) {
/*최소481px ~ 그 이상일때 까지 : 아래가 768px 이므로 481px ~ 767px 까지 입니다.*/
}

@media screen and (min-width: 768px) {
/*최소768px ~ 그 이상일때 까지*/
}