반응 형 HTML (및 CSS)

Question

저는 반응 형 웹 사이트에 익숙하지 않아 모든 화면을 고려한 웹 사이트를 만들고 싶습니다.

명백히 미디어 쿼리는 이동하는 방법이지만 CSS에만 관련된 것입니다.

현재 프로젝트에서는 페이지의 너비에 따라 페이지를 다르게 구성하고 싶습니다 (완전히 장치 불가지론적임). 작은 폭에서는 HTML 레이아웃이 완전히 바뀌므로 HTML을 "반응 형"으로 만들고 웹 사이트 너비에 따라 변경해야합니다.

어떻게하면됩니까? 페이지의 너비에 따라 다른 HTML 페이지를 "제공"할 수있는 js 라이브러리 (가능한 경우 필수이지만 필수는 아닌 jQuery)가 있습니까?

전체 웹 사이트가 이런 식으로 작성되어야 스크립트가 가젯 이상이어야하며 전체 웹 사이트가 충분히 신뢰할 수 있도록 충분히 견고해야합니다. 물론 모든 장치 나 화면 또는 브라우저에서 작동해야합니다.

응답 성있는 것보다 적응 형 기술을 더 많이 찾고 있다고 말하는 사람도 있지만 일반적으로 응답 성이 뛰어나지 만 중요한 일부 중단 점 사이에는 믹스가 있다고 생각합니다. html.

다른 기술에 대해 많이 읽었지만 내 요구에 맞는 것을 찾을 수 없습니다. 모든 리드가 인정 될 것입니다.

도움 주셔서 감사합니다.

Answer 1

당신이 설명하는 것은 적응성 전달입니다. 원하는 것은 서버 측 언어를 사용하여 사용자 에이전트 문자열을 감지 한 다음 장치가 전화, 태블릿 또는 데스크톱인지 여부에 따라 템플릿을 조건부로 렌더링하는 것입니다. 현실적으로 화면 사이에 많은 코드를 공유하지만 다른 탐색 레이아웃을 사용하거나 작은 화면에 더 많은 기능을 표시하지 않도록 선택할 수 있습니다. 이 접근법은 많은 숨기기/표시 코드를 저장할뿐만 아니라, 어쨌든 전체 시간에 숨겨져있는 물건을로드 할 작은 화면에 많은 오버 헤드를 저장합니다.

Answer 2

Bootstrap과 같은 기존 CSS 프레임 워크를 사용하여 다양한 대상 브라우저 너비와 장치 유형에 대한 반응 형 디자인을 구현할 수 있습니까?

특히 부트 스트랩을 사용하면 페이지가 렌더링되는 장치 너비에 따라 다른 레이아웃을 지정할 수 있습니다. More information here - 브라우저 너비를 조정하여 실제 상황을 확인하십시오.

기존 프레임 워크를 평가 한 후에도 여전히 자신 만의 프레임 워크를 개발한다면 적어도 부트 스트랩 또는 다른 프레임 워크의 기술을 자신의 출발점으로 사용할 수 있습니다.

Answer 3

장치 및 화면 너비에 따라 CSS 및 미디어 쿼리를 사용하여 페이지 레이아웃 ("completly")을 변경할 수 있습니다. 내가 너라면 나는이 기술들이 제공 할 수있는 가능성을 조금 더 깊게 파고들 것이다.

긍정적 인 경우 충분하지 않습니다. 사용자 상담원에 따라 사용자를 다른 페이지로 리디렉션하는 방법은 Redirects and User-Agent Detection입니다.

사용자 에이전트 또는 너비에 따라 필요한 리디렉션과 동적 콘텐츠를 처리 할 수있는 전체 프레임 워크를 찾고 훨씬 더 많은 것을 찾으려면 AngularJS을 조사해야합니다.

당신은 물론 당신의 기준에 따라 순수한 JS로 일부 DOM 조작을 할 수 있지만 프로젝트가 커질수록 당신은 상처의 세계에 빠질 수 있습니다.

Answer 4

는 Bootstrap

부트 스트랩 프런트 엔드 웹 개발을 빠르고 쉽게 시도합니다. 모든 기술 수준의 사람들, 모든 형태의 장치 및 모든 규모의 프로젝트를 위해 제작되었습니다.

Answer 5

프로젝트에 충분한 지 모르겠지만 CSS를 사용하여 작거나 큰 기기에서 표시하거나 숨기려는 마크 업을 제어 할 수 있습니다. 예를 들어 :

<div class="mobile-only"> 
     <p>This content will only be visible on small screens such as mobile devices</p> 
    </div> 
    <div class="tablet-up"> 
     <p>This content will only be visible in tablet and larger devices</p> 
    </div> 

    /* media query for small screens, such as mobile devices */ 
    @media screen and (max-width: 767px) { 
     .tablet-up { 
     display: none !important; 
     } 
    } 

    /* media query for tablet and larger devices*/ 
    @media screen and (min-width: 768px) { 
     .mobile-only { 
     display: none !important; 
     } 
    } 

하지만 당신은 정말 큰 프로젝트가 있다면 당신은이 기술을 사용하지 않는 것이 확인하여 성능을 질식 결말 될 수 있습니다.