자바스크립트 - 모바일 적응형

Question

지금 회사 모바일 공식 홈페이지에서 작업하고 있는데, psd는 750이고, 아이폰6 기준으로 제작되었습니다. 그런데 다른 기기로 전환하면 멈춥니다. 이것을 조정해야 하나요? 스타일을 많이 바꿔야 할 것 같아요

Answer 1

개인 의견: 두 개의 큰 원으로 구성된 그래픽의 위치 지정과 같은 대형 컨테이너의 경우 rem을 단위로 사용할 수 있지만 일부 내부 세부 사항(예: 자원, 장비, 인력)을 사용할 수 있습니다. . . 이러한 작은 아이콘을 rem 단위로 설정하지 않고 px를 사용하여 위치를 지정하는 것이 가장 좋습니다. 자체적으로 설정한 측위 거리가 그리 크지 않기 때문에 px와 rem을 사용하여 계산한 값은 실제로 크게 다르지 않으며, px를 단위로 사용해도 기기에 따라 혼동이 생기지 않습니다.

Answer 2

캔버스로 제작하시는 것을 추천드립니다

Answer 3

정사각형 레이아웃에 속하지 않기 때문에 원형, 불규칙 요소가 너무 많은 경우 개발 효율성을 위해 여러 가지 클래식한 크기(또는 고객 수가 가장 많은 크기)로 사진을 만드는 것이 좋습니다. 근처에서 다른 해상도를 조정할 수 있습니다.

Answer 4

클릭이 필요하지 않다면 직접 사진을 만들어도 되고, 클릭이나 상호작용이 필요하다면 직접 작성하셔도 됩니다

Answer 5

브라우저에 따라 크게 달라질 수 있습니다. 기기에서 시청하세요. 창에 고정된 너비를 부여하고 스스로 늘어나도록 할 수 있습니다

Answer 6

사진을 하나의 화면으로 만들고 다른 장치에 적용하기 위해 하나의 디자인 초안에 의존하는 것은 단순히 망상입니다. 16:9 사진은 확실히 4:3 장치에 완전히 적용되지 않을 것이며 다양한 브라우저도 혼합되어 있습니다. , WeChat과 같은 일부 지저분한 앱은 선택만 하면 됩니다. 완전히 적응하기 위해 많은 돈을 써야 할까요, 아니면 허용 가능한 조건에서 다운그레이드해야 할까요? 일반적으로 쉽게 하나의 화면으로 만들어 대부분의 디바이스에 적용할 수 있는 페이지는 상대적으로 내용이 적고, 배경도 복잡한 그림이 아닙니다.

귀하와 같은 것은 분명히 가로챌 수 있습니다. 스크롤 막대를 만들거나(실제로는 이것이 아무것도 아니라고 생각합니다) 콘텐츠 위치를 수동으로 조정해야 합니다. 실제로 rem을 사용하는 데에는 문제가 없습니다. 핵심은 고정 범위가 있는지 여부입니다. 내 H5의 대부분은 flex 레이아웃과 마찬가지로 rem으로 작성됩니다.

예: 위치를 계산할 때 디자인 초안에 있는 위치를 기준으로 계산해야 합니다. ----- 사진의 위치가 왼쪽인 경우: 상단: 디자인 초안의 80px(너비 750); 글꼴 크기: 120px, 위치는 320/750 = 0.107rem;
브라우저 창 배치 시 컨테이너 너비가 750px(최대 너비: 6.25rem)인지 확인하세요. 컨테이너 변경 사항은 항상 비례적으로 크기가 조정되었습니다. 이제부터는 미디어 html

의 글꼴 크기만 필요합니다.

제 프로젝트 #container http://lonelymoon.linux2.jiuh...의 style.css와 custom.css를 살펴보실 수 있습니다...

Answer 7

패딩 상단: 백분율