모바일 웹 레이아웃 동영상 튜토리얼

"모바일 웹 레이아웃 영상 튜토리얼"에서는 모바일 웹 개발의 기초, 효율적인 조판 및 레이아웃, 일반적인 모바일 웹 문제, 터미널 터치 인터랙션, 다양한 버그 해결 방법 등을 소개합니다. 모바일 측면에서는 적응 문제를 언급하지 않을 수 없습니다. 모든 크기의 모바일 장치는 Android 및 iOS 구축을 어렵게 할 뿐만 아니라 장치 크기와 브라우저의 차이로 인해 이제 프런트 엔드가 됩니다. 하지만 방법은 항상 더 낫습니다. 우리는 혁명적인 팀이므로 문제가 발생하면 조치를 취해야 합니다.

강좌 재생 주소: http://www.php.cn/course/428.html

선생님의 강의 스타일:

선생님의 강의는 생생하고 재치 있고 재치 있습니다. , 감동. 생생한 은유는 학생들에게 지혜의 문을 열어주는 마무리와 같습니다. 잘 배치된 유머는 마치 부드러운 와인 한 잔을 마시는 것과 같이 학생들에게 아는 듯한 미소를 가져다 주고, 사람들에게 철학자의 격언과 문화적 언급을 선사합니다. 내레이션에 때때로 삽입되어 사람들에게 생각과 주의력을 제공합니다.

이 영상에서 더 어려운 점은 모바일 웹을 위한 특별한 스타일 처리입니다:

고화질 사진의 문제

HD 사진은 우리가 일반적으로 다운로드하는 영화의 고화질 사진과 다릅니다. 모바일 웹용 고화질 사진은 내 것입니다. 이 사진은 너무 크고 선명하기 때문에 모바일 장치에서 명확하게 표시해야 합니다. 그러면 왜 모호함이 있는 걸까요? 사진이 100px * 100px이면 모바일 장치에서는 100px * 100px로 표시한다고 생각하면 문제가 없습니다.

하지만 생각해 봅시다. Retina 화면에서는 1px가 2dp이므로 100px*100px를 사용하면 실제로 렌더링에 200dp * 200dp의 물리적 픽셀을 사용하는 것이므로 사진이 확대되고 흐릿해집니다.

모바일 웹 페이지에서 이미지를 렌더링할 때 이미지가 흐려지는 것을 방지하기 위해 이미지의 너비와 높이는 물리적 픽셀 단위로 렌더링되어야 합니다. 즉, 100 * 100 이미지의 경우 100dp * 100dp를 사용해야 합니다. .

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

직접 말하면 고화질 화면에서 사진이 100*100이면 50*50px를 사용하여 iPhone6 ​​Plus에서 dpr이 2보다 크면 렌더링해야 합니다. 이 방법으로 dpr(3)을 제거합니다.

여기에서 소스 코드 리소스를 다운로드하는 것이 좋습니다: http://www.php.cn/xiazai/code/2051

이 비디오 코스웨어는 모든 사람과 공유됩니다:

1 . 모바일 웹 레이아웃 동영상 튜토리얼

위 내용은 모바일 웹 레이아웃 동영상 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!