반응 형 디자인이란 무엇입니까? (설명 비디오 및 인포 그래픽)

반응 형 웹 디자인

XNUMX 년이 걸렸습니다. 반응 형 웹 디자인 (RWD) 이후 주류로 Cameron Adams가 처음 소개 개념. 아이디어는 독창적이었습니다.보고있는 장치의 뷰포트에 적응하는 사이트를 디자인 할 수없는 이유는 무엇입니까?

반응 형 디자인이란 무엇입니까?

반응 형 웹 디자인 (RWD)은 다양한 장치 (휴대폰에서 데스크톱 컴퓨터에 이르기까지 최소한의 크기 조정, 이동 및 스크롤로 쉽게 읽기 및 탐색)를 제공하는 최적의보기 환경을 제공하기위한 사이트 제작을 목표로하는 웹 디자인 접근 방식입니다. 모니터). RWD로 설계된 사이트는 유동적 인 비율 기반 그리드, 유연한 이미지 및 @media 규칙의 확장 인 CSS3 미디어 쿼리를 사용하여보기 환경에 맞게 레이아웃을 조정합니다.

위키 백과

즉, 이미지와 같은 요소와 해당 요소의 레이아웃을 조정할 수 있습니다. 다음은 반응 형 디자인이 무엇인지와 회사에서이를 구현해야하는 이유를 설명하는 비디오입니다. 우리는 최근에 DK New Media 사이트가 반응하고 현재 작업 중입니다. Martech Zone 똑같이!

반응 형 사이트를 구축하는 방법은 뷰포트의 크기에 따라 구성되는 스타일에 대한 계층 구조가 필요하기 때문에 약간 지루합니다.

브라우저는 크기를 스스로 인식하므로 화면 크기에 적용 가능한 스타일을 쿼리하여 위에서 아래로 스타일 시트를로드합니다. 이것은 모든 크기의 화면에 대해 서로 다른 스타일 시트를 디자인해야한다는 것을 의미하지는 않으며 필요한 요소 만 이동하면됩니다.

오늘날 모바일 중심의 사고 방식으로 운영하는 것이 기본 표준입니다. 업계 최고의 브랜드는 사이트가 모바일 친화적인지 여부뿐만 아니라 완전한 고객 경험에 대해서도 생각하고 있습니다.

루신다 던칼프, 모네테이트 CEO

다음은 여러 기기에 대해 하나의 반응 형 디자인을 만들 때의 잠재적 인 이점을 보여주는 Monetate의 인포 그래픽입니다.

반응 형 웹 디자인 인포 그래픽

작동중인 반응 형 사이트를보고 싶다면 구글 크롬 브라우저 (Firefox에도 동일한 기능이 있다고 생각합니다) DK New Media. 지금 선택하십시오. 보기> 개발자> 개발자 도구 메뉴에서. 이렇게하면 브라우저 하단에 여러 도구가로드됩니다. 개발자 도구 메뉴 모음의 맨 왼쪽에있는 작은 모바일 아이콘을 클릭합니다.

반응 형 테스트 크롬

상단의 탐색 옵션을 사용하여보기를 가로에서 세로로 변경하거나 사전 프로그래밍 된 표시 영역 크기를 원하는만큼 선택할 수도 있습니다. 페이지를 새로 고침해야 할 수도 있지만 반응 형 설정을 확인하고 사이트가 모든 장치에서 멋지게 보이도록하기위한 세계에서 가장 멋진 도구입니다!

댓글 3

  1. 1
  2. 2

    이 잘 설명 된 기사에 대해 많은 Douglas에게 감사드립니다. 나는 사물의 내용 측면에서 이것에 동의해야합니다. 대부분의 사이트에서 반응 형 레이아웃으로는 충분하지 않습니다. 반응 형 콘텐츠가 필요합니다. 그러나 좀 더 기본적인 웹 사이트의 경우이를 처리하는 방법에 대한 잘 문서화 된 기사를 사용할 것입니다!

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.