답변:
반응 형 디자인은 화면 해상도 나 화면 크기를 기준으로하지 않습니다. 대신, 반응 형 디자인은 내용 과 제작 방식을 기반으로하여 모든 크기와 해상도에 맞출 수 있습니다.
반응 형 디자인에 대해 생각하는 방식이 잘못되었습니다. 좀 더 전통적인 인쇄 디자인 배경을 가지고 있다고 가정합니다. 웹 디자인은 훨씬 더 자유 롭습니다. 반응 형 웹 사이트는 웹에서 허용하는 것 이상으로 허용되는 동일한 기존의 중단 점 또는 특정 크기 / 해상도를 갖지 않는 경우가 많으므로 모든 화면 크기에 도달 할 수 있습니다. 따라서 합리적인 크기의 디자인에 적합한 크기를 사용하여 디자인 할 수 있습니다.
그렇게 말하면, 가장 좋은 방법은 모바일 우선 방식 으로 디자인 하는 것인데, 이는 실제로 모바일에서 가장 중요한 이름으로 지정되어야합니다 . 이를 통해 가장 중요하고 가능한 컨텐츠에 집중 한 다음 큰 화면에서 더 많은 것을 시작한 다음 작은 화면을 디자인 할 때 물건을 제거하는 대신 큰 화면에 더 많은 것을 추가 할 수 있습니다. 반응 형 디자인 입문서 에서 이에 대해 더 자세히 읽을 수 있습니다 .
그러나 우리는 또한 책임감있는 방식으로 설계해야합니다. 모범 사례는 프로토 타입 형식이든 와이어 프레임 프로그램이든 PSD와 같은 정적 문서가 아닌 실제 예제입니다. 개발자 측면에서는 반응 형 단위를 사용 하고 코드를 이해하기 쉬운 방식으로 구성해야합니다.
그렇게 말하면 화면 크기가 아닌 해상도를 의미하는 픽셀로 물건을 넣어야합니다.
정말 좋은 질문입니다!
우리가 오늘날 직면하고있는 모순을 약간 언급하는 생각이 여기에 있습니다.
이 기술 은 오랜 세월 이래로 있어야 할 것이 아닙니다 .
우리 모두는 실제 단위 (또는 percived size)를 기반으로 디자인해야하며 , 사용자가 약간의 조정을 할 수있는 유연성과 자유도를 가지고 있어야합니다.
그러나 실제 측정을 위해서는 두 가지 정보가 모두 필요합니다. 물리적 치수 및 장치 해상도 = 픽셀 밀도.
그러나 몇 년 전만해도 스크린 장치가 픽셀 밀도를 선언하기 시작했습니다. 그리고 일부는 서버에 선언하지 않고 단지 그것에 대해 많은 홍보를합니다. (일명 Ipad, 아이폰)
디스플레이 해상도는 그에 따라 신호를 보내야하기 때문에 운영 체제에서 감지 할 수 있지만 실제 화면 크기에는 각 모델의 거대한 데이터베이스가 필요합니다. 안좋다.
이 화면 해상도만으로도 우리가 알 수있는 정보입니다.
그러나 모빌 장치에서 동일한 해상도보다 큰 FullHD 모니터를 설계하는 것은 완전히 다릅니다. 1920x1080. 아야.
특별한 경우는 프로젝터에서 투사 거리와 시청자 거리에 대한 실마리가 없기 때문입니다.
부분 솔루션은 미디어 쿼리 및 벡터 요소 등입니다.
웹 디자인 : 적어도 우리가 더 나은 것을 찾을 때까지.
유체 설계 (백분율) 및 자연 흐름, 잘 정의 된 섹션.
1920 년 폭
아마 1280에서 미디어 쿼리
그리고 / 또는 1024
아마 720에
및 480.
추가 지원을위한 장치 감지 기능이 있습니다.
모바일 네이티브 앱
매우 구체적이므로 UI 및 아이콘과 관련하여 브랜드의 기준을 따르십시오.
편집했습니다.
FullHD 모바일 장치에서 작은 화면 해상도를 선택해야하는 이유는 무엇입니까?
스마트 폰의 실제 해상도는 FullHD이지만 일반적으로 서버와 브라우저에 작은 해상도를 선언합니다. 미디어 검색이 작동하도록 https://www.google.com/search?q=what+is+my+screen+resolution 이 인터넷 검색을 테스트 할 수 있습니다 .
먼저 답변과 소중한 지침에 대해 모두 감사합니다.
결론을 추가 할 수 있습니다.
실제로 모바일 화면 해상도를 타겟팅하는 것은 좋은 UX가 아니며, 작은 화면에서는 해상도가 너무 높고, 글꼴을 읽기에는 너무 작고, 아이콘을 클릭하기에는 너무 작습니다.
따라서 실제 뷰포트 크기를 기준으로 디자인을 만드는 것이 좋습니다! 이 방법은 사용자가보고 느낄 수있는 것을 기반으로합니다.
실생활에서이를 달성하려면 <head>HTML 문서 안에 뷰포트 너비 메타 태그를 추가해야합니다 .
<meta name="viewport" content="width=device-width, initial-scale=1.0">이렇게하면 브라우저가 페이지 너비와 화면 너비를 렌더링하도록 HTML 페이지 너비와 픽셀 너비가 화면 너비와 같아 지도록합니다. 그런 다음 서로 다른 모바일 뷰포트 크기를 대상 으로하는 미디어 쿼리를 사용하여 개발을 쉽게 계획 할 수 있으며 시각적으로보다 명확한 요소를 생성 할 수 있습니다.
내가 틀렸다면 정정 해주세요.
겸손한 경험을 바탕으로 더 나은 반응 형 웹 사이트 개발을 위해 아래 단계를 제안합니다.
1- 뷰포트 메타 (위 참조)를 사용하면 Google에 따라 모바일 검색 결과에서 웹 페이지의 순위가 높아집니다. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
테스트 후, 뷰포트 메타 만 추가하면 모바일 테스트 도구 https://developers.google.com/speed/pagespeed/insights/ 에서 웹 사이트 등급이 제공되는 것으로 보입니다.
2- 모바일 우선 접근 방식을 적용하고 싶을 수 있습니다. 웹 사이트의 복잡성에 따라 작은 것보다 항상 더 쉽게 갈 수 있습니다.
3- 적응 형 (유체)과 반응 형 (css 미디어 쿼리)을 혼합 한 하이브리드 반응 형 시스템을 적용하여 다음을 수행합니다.
너비 및 가로 여백 / 패딩에 백분율 을 사용하십시오 . (원하는 경우 세로 여백에 고정 픽셀 크기가있을 수 있습니다. 스크롤이 더 이상 문제가되지 않습니다.)
글꼴에 em 을 사용 하면 미디어 쿼리에서 본문 (또는 HTML)의 글꼴 크기를 변경할 때 모든 CSS 요소가 해당 크기에 맞게 조정됩니다 .px를 사용하면 각 CSS 클래스마다 가야하기 때문에 악몽이됩니다. 글꼴 크기를 변경하십시오.
플로트 div를 왼쪽으로 플로팅하여 사용 가능한 공간에 올바르게 정렬하십시오 (또는 디자인에 필요한 경우 오른쪽).
4- 브레이크 포인트를 정의하고 반응 형 테스트 툴을 사용 하십시오 . 파이어 폭스 반응 형 디자인보기를 사용하여 웹 사이트에 결함이있는 지점 (예 : 500px)에 도달 할 때까지 너비를 좁히십시오.
해당 중단 점 (500px) 의 미디어 쿼리 내에 새로운 CSS 규칙을 적용합니다 .
5- 웹 사이트의 품질과 선명도를 유지해야합니다! 요소가 불분명하고 서로 너무 가까워지면 요소 너비를 확장하여 컨테이너 너비를 차지하고 세로로 쌓으십시오.
본문에 새로운 글꼴 크기를 지정하여 모든 하위 요소가 더 큰 글꼴을 상속하고 더 읽기 쉽도록해야합니다.
6- 반응 형 테스트를 반복하고 두 번째 중단 점을 정의하십시오. 대부분 유동적 인 설계를 사용하기 때문에 많은 중단 점을 얻지 못할 것입니다.
나는 전에 무거운 디자인 요소가있는 큰 웹 사이트에서 일했으며 2 개의 미디어 쿼리 만 필요했습니다 :)
희망이 도움이 될 것입니다
반응 형 페이지 리플 로우 방법은 실제 픽셀이 아닌 가상 픽셀 의 뷰포트 (화면이 아님) 의 크기를 기반으로합니다 .
1 개의 가상 픽셀 = 1 개의 실제 픽셀 인 기존 데스크탑에서 브라우저 너비가 1000px로 설정되어 있으면 페이지가 리플 로우됩니다.
1 개의 가상 픽셀 (Apple이이 포인트를 호출 함 ) = 3 개의 실제 픽셀 인 iPhone 6의 경우 브라우저 너비는 화면 너비이며 내용은 417 픽셀 너비에 맞게 리플 로우됩니다 (실제로는 1242 개의 실제 픽셀 임에도 불구하고)
따라서 위의 예에서 실제 픽셀 수가 적은 장치는 실제로 반응 형 레이아웃에서 더 넓은 뷰포트 로 볼 수 있다는 점에서 약간 이상 합니다.