080624 til css 반응형

오늘은 팀프로젝트 

 

css 반응형 아이폰 12 프로 로 

 

수정 하고 있다 

 

반응형웹 이란 

 

어떤기기에 접속하던지 

 

화면 크기가 자동으로 변하도록 만들어놓은 웹 사이트를 말한다 

 

아이패드에 서 들어가면 아이패드 사이즈에 맞게 화면이 나오고 

 

아이폰에서 들어가면 아이폰 사이즈에 맞게 나오고 

 

데스크톱 에서들어가면 모니터사이즈에 맞게 나오게 하는 것 을 말한다 

 

반응형이 이렇게 오래걸리고 

 

일일이 수작업 인줄 ... 

 

 

몰랐다 ... 

 

크롬 개발자 도구 에서 검사 를 눌러서 아이폰 테블릿 모양을 누르면 

 

기기 를 선택해서 볼수있다 

 

화면 넓이에 따라 바꿔야할 css 만 적어주면 

 

설정한 값들은 그대로 적용이 된다 . 

 

근데 잘 모르겟다 !!!

 

일일이 사이즈 줄여가면서 

 

아이폰 화면 보면서 

 

작업중이다 .  

 

 

 

스마트폰 세로: 0px ~ 480px
스마트폰 가로, 태블릿 : 481px ~ 768px
태블릿 가로, 노트북 : 769px ~ 1279px
데스크탑 : 1280px ~

미디어 쿼리를 써야한다 

 

@media screen and (사이즈 조건 ) {

//기기 .에 적용할 css 

}

@media 띄고 screen 띄고 and 띄고 (사이즈 조건 ) {

} 



@media screen and (orientation: landscape) { 

} 

가로모드