responsive-design - 예제 - 반응형 웹 적응형 웹



반응 형 디자인 대 적응 형 디자인 (6)

유체 레이아웃

화면 너비가 증가하거나 감소 할 때 워드 랩 방식으로 조정됩니다.

적응 형 레이아웃

다른 레이아웃이 트리거 된 미리 정의 된 크기가 있습니다. 이를 중단 점 이라고 합니다 . 적응 형 레이아웃은 유동적이거나 완전히 정적 일 수 있습니다!

반응 형 레이아웃

유체와 적응 형 레이아웃의 조합 . 최적의 경험을 제공합니다.

점진적 향상

지능적인 방식으로 기술을 적용하여 콘텐츠 (및 사용자)를 존중하는 프로세스입니다. 점진적 향상에서는 여러 브라우저에서 동일한 경험을 제공 할 필요가 없습니다.

출처 : bloggingexperiment.com/archives/…

https://src-bin.com

RWD (Responsive Web Design)와 AWD (Adaptive Web Design)의 차이점을 간단한 방법으로 설명해 주시겠습니까?



Answer #2

내가 보았던 대체 정의는 마법이 일어나는 곳에서 그것을 붕괴시킨다.

  • 응답 - 클라이언트 측 - 동일한 페이지가 모든 장치로 반환되지만 페이지 표시는 일반적으로 JavaScript 및 CSS (특히 미디어 쿼리)를 사용하여 장치에 응답합니다.
  • 적응 형 서버 측 정보는 장치 사양과 관련하여 서버에 전달되며 해당 장치에 적합한 페이지가 반환됩니다. RWD와 동일한 JavaScript / CSS 기술을 사용하지만 일부 내용은 다를 수도 있고 더 작을 수도 있습니다.

출처 : http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

이 정의가 페이지 내용의 흐름에 대해 더 많이 이야기하는 다른 것들과 어떻게 어울리는 지 잘 모르겠습니다.


Answer #3

유체, 고정, 반응 형 및 적응 형 레이아웃을 구별하는 가장 좋은 링크 중 하나입니다. http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2 . html 페이지에 적용된 스타일에 대한 간단한 단어로,

  1. 고정 레이아웃 : 픽셀 사용.
  2. 유체 배치 : 백분율 사용.
  3. 반응이 빠른 레이아웃 : 미디어 쿼리에 백분율 만 사용
  4. 적응 형 레이아웃 : 미디어 쿼리에서 픽셀과 백분율을 모두 사용

Answer #4

주제에 대한 내 블로그 게시물에서 :

Ethan Marcotte가 작성한 "Responsive Web Design"은 "유체 그리드, 유체 이미지 / 미디어 및 미디어 쿼리"를 의미합니다. "적응 형 웹 디자인"은 사용자의 기능에 맞게 인터페이스를 만드는 것입니다 (측면에서 형태와 기능 모두). 나에게 "적응 형 웹 디자인"은 반응 형 웹 디자인이 필수적인 요소가 될 수있는 "점진적 향상"의 또 다른 용어이지만 웹 디자인에 대한 전체 론적 접근 방식은 다양한 점을 고려한 것입니다. 마크 업 수준, CSS, JavaScript 및 보조 기술 지원.

"적응 형 레이아웃"은 점진적으로 강화 된 방식으로 수행되지 않을 수있는 미디어 쿼리 만 사용하기 때문에 "적응 형 웹 디자인"과 "적응 형 레이아웃"을 구별하는 것이 중요하다고 생각합니다. 그러나 모바일 우선 방식으로 구현 된 적응 형 레이아웃은 점진적인 향상과 그에 따른 적응 형 웹 디자인의 수단입니다.


Answer #5

웹 사이트 디자인의 의미 : 반응 형 디자인 : 유체 격자유연한 콘텐츠 (예 : 이미지) 및 미디어 쿼리 (CSS)로 웹 페이지를 만듭니다. 이렇게하면 브라우저 / 장치 너비에 따라 레이아웃이 조정됩니다. 적응 형 디자인 : 고정 레이아웃이있는 웹 페이지 작성은 유체 격자 또는 유연한 내용을 의미하지 않습니다. 특정 지점의 페이지 레이아웃을 중단합니다 (예 : 미디어 쿼리 사용).