모바일 웹 개발 요약

　일주전에 HTML+CSS 기반으로 PC사이드 프로젝트를 완성했는데, 요 며칠간 역시 HTML+CSS 기반으로 완성된 모바일사이드 개발을 접하게 되었습니다. . 모바일 단말기 개발을 접한 것은 처음이었지만, 개발 과정에서 PC 단말기의 개발 과정도 따라해 보았습니다. 먼저 레이아웃을 자르고 전체적인 계획을 먼저 세우고 어떤 것이 구성 요소로 사용될 수 있는지 분석할 수도 있습니다. 이번 모바일 단말기 프로젝트에는 컴포넌트로 사용할 수 있는 부품이 꽤 많습니다. 이를 통해 개발 효율성이 향상됩니다. 모바일 웹 개발의 주요 대상은 휴대용 기기이므로 PC 개발과 다른 점은 브라우저 호환성 문제를 고려할 필요가 없고 다양한 크기의 기기에 대한 적응 문제입니다.

1. 우선 미디어를 사용할 때 다음 코드(head 태그에 작성)를 설정해야 합니다.

　　

이 코드의 여러 매개변수에 대한 설명:

• width = device-width: 너비는 현재 장치의 너비와 같습니다

• initial-scale: 초기 스케일링(기본 설정은 1.0)

• 최소 배율: 사용자가 확대/축소할 수 있는 최소 비율(기본 설정은 1.0)

• maximum-scale: 사용자가 확대/축소할 수 있는 최대 비율(기본 설정은 1.0)

• 사용자 확장 가능: 사용자가 수동으로 확대/축소할 수 있는지 여부(기본값은 no입니다. 사용자가 페이지를 확대하거나 축소하는 것을 원하지 않기 때문입니다)

2. CSS 미디어 쿼리

　　지정된 미디어 유형 및 쿼리 조건에 대한 스타일 시트 규칙을 지정합니다. 다양한 크기의 장치에 표시 콘텐츠를 설정합니다.

1. @media 화면 및 (최대-너비: 960px){
2.  본체{
3.  배경: #000;
4.  }
5. }

위 코드는 화면이 960px 이하일 때의 스타일을 설명합니다. 화면이 960px 이하인 경우 페이지의 배경색은 검정색이 됩니다.