반응형 웹사이트_반응형 웹사이트_반응형과 적응형의 차이점
기사 디렉토리
반응형
- 인터페이스를 개발하면 됩니다.
- 페이지의 화면 적응은 특정 범위 내에 있습니다. 예를 들어 PC용 한 세트(>1024), 태블릿용 한 세트(768-1024), 휴대폰용 한 세트(<768), 반응형 모든 페이지용 한 세트; 적응됩니다. (상상할 수 있듯이 반응형 디자인은 적응형 디자인보다 훨씬 더 복잡한 것으로 간주되어야 합니다)
- 웹 페이지를 만들고 CSS 미디어 쿼리, 콘텐츠 기반 중단점 및 기타 기술을 사용하여 다양한 해상도의 화면에 맞게 웹 페이지 크기를 변경합니다.
적응형
- 다양한 인터페이스를 개발해야 함
- 뷰포트 해상도를 감지하여 현재 액세스된 장치가 PC, 태블릿 또는 휴대폰인지 확인하여 서비스 계층을 요청하고 다른 페이지를 반환합니다. 반응형 디자인은 뷰포트 해상도를 감지하고 다양한 클라이언트에 대해 클라이언트에서 작업을 수행합니다. 다양한 레이아웃과 콘텐츠를 표시하는 코드 처리.
- 다양한 유형의 장치에 대해 서로 다른 웹 페이지를 만들고 장치 해상도를 감지한 후 해당 웹 페이지를 호출합니다.
반응형과 적응형을 구별하세요
- 브라우저 크롬이나 엣지를 사용하여 컴퓨터에서 URL을 엽니다.
- ~에 따르면
F12아니면 마우스 오른쪽 버튼을 클릭하고 선택하세요.발각。 - 패널의 왼쪽 상단을 클릭하세요.
장치 전환 아이콘,아래 그림과 같이
- 전환 후,
컴퓨터와 모바일 단말기에 표시되는 레이아웃이 자동으로 전환됩니다.반응형, 이 사이트와 같은
레이아웃이 자동으로 조정되지 않으면 페이지를 새로 고친 후 레이아웃이 조정으로 전환됩니다(URL이 점프하거나 점프하지 않음).적응형, Baidu와 같은;
새로 고침 후 전환이 없으면 반응도 적응도 되지 않으며 다른 장치에 적응하지도 않습니다.
제안
- 개발 관점: 단일 페이지, 복잡한 기능, 적응형 단순 기능, 반응형.
- SEO 관점: 검색 엔진은 일반적으로 반응성을 선호합니다.
요약하다
- 반응형:
템플릿 세트; 프런트엔드에서 적용하여 다양한 해상도의 템플릿이 한 페이지로 병합되며, 한 페이지의 템플릿을 다운로드하는 것은 단지 한 페이지에 불과합니다. - 적응형:
여러 템플릿 세트; 백엔드에 의해 조정된 각 해상도 템플릿은 하나의 페이지로 구성되며 다양한 해상도 템플릿이 별도로 다운로드됩니다.