Responsive web design | css media query | html viewport

이것은 html 웹 페이지입니다 응답하는 이제 내가 어떻게 반응하는지 보여 줄거야

이렇게 더 작은 장치에서 완벽하게 작동합니다 화면 너비 변경시 atomaticalley 변경 요소의 스타일링 이제 스타일 시트에서 미디어 쿼리 코드를 삭제했습니다 이제 기본 스타일로 표시되는 웹 페이지 더 작은 장치에서는 읽을 수 없다 더 작고 더 큰 장치에서 읽을 수 있도록하기 위해 미디어 쿼리를 사용합니다 이제는 휴대 전화 및 안드로이드 기기와 같은 기기에서 읽을 수 있도록 해 드리겠습니다

이것은 태블릿의 화면 크기입니다 ibrowser inspector에서 view-port를 확인할 수도 있습니다 (ctrl + shift + I) 이것은 모바일 화면 너비입니다 이제 코드로 되돌아갑니다 이것은 스타일 시트이다

내가 사용한 수업에 대한 설명은 이전 비디오 링크를 확인하십시오 이제는 미디어 쿼리를 사용하여 더 작은 장치에서 웹 페이지를 읽을 수있게했습니다 미디어 쿼리는 @media 화면으로 시작합니다 최대 또는 최소 미디어 장치 너비 또는 높이 사용을 피하십시오; 값 다음에 표시하다 중괄호 사용 이 중괄호 안의 요소를 정의하기 시작합니다 우선 부모의 모든 너비 설정 집단 내지 100 %; 그런 다음 하위 요소의 스타일을 변경합니다 이제는 평소와 같이 요소를 정의하십시오

지금 이것은 읽을 수있다 사이드 바, 메인 컨텐츠 및 오른쪽 사이드 바 모두 100 % 너비로 설정됩니다 이제 링크, 로고 및 사이트 제목을 정의 할 수 있습니다 헤더 부분에 4 개의 div 엘리먼트가있다 그래서 그것을 읽기가 어렵게 만드는 것은 어렵다

링크 엘리먼트가 바닥에 고정된다