백분율 대신 CSS에서 픽셀 번호를 사용하는 것이 호환성 측면에서 나쁩니 까? 낮은 해상도는 어떻습니까? 1-100 범위에서 작업해도 괜찮습니까?
답변:
대답은 대부분 귀하의 상황에 따라 다르기 때문에 어려운 질문입니다.
픽셀은 그다지 나쁘지 않으며 주로 사용합니다. (때때로 글꼴 크기에 대해서도 마찬가지입니다.)
일반적으로 레이아웃의 외부 블록 요소를 지정된 크기 (고정 너비 레이아웃의 픽셀 및 유동 레이아웃의 백분율)로 고정하고 내부 요소에는 가능한 경우 항상 백분율을 설정합니다.
백분율이나 ems 로 스타일을 지정할 수없는 요소가 있습니다 . 특히 이러한 원칙을 이해하지 못하는 그래픽 디자이너가 만든 더 멋진 요소가 있습니다 .
예를 들어 사이트에 단순한 스타일의 열이있는 경우 너비를 백분율로 쉽게 설정할 수 있지만 배율을 염두에두고 설계되지 않은 특정 너비의 배경 이미지가있는 경우보기 만 좋을뿐입니다. 고정 너비로. 이러한 경우 페이지의 나머지 부분이 나머지 너비를 올바르게 차지하는지 확인해야합니다.
백분율이있는 픽셀을 함께 사용할 수 있습니다.
예를 들어 다음은 내 최신 웹 앱 중 하나의 스 니펫입니다.
min-width: 800px;
width: 80%;
max-width: 1500px;
선택은 또한 달성하려는 디자인 또는 레이아웃에 따라 다릅니다.
A에 대한 고정 폭 레이아웃, 픽셀 값은 미세하다. 디자이너가 크기 조정 방법에 대해 생각하는 것조차 매우 복잡 할 수있는 정말 멋진 내용이 포함 된 포토샵 이미지를 제공하는 경우 반드시이 작업을 수행해야합니다.
레이아웃이 동적 이어야하는 경우 백분율을 사용하여 해상도가 변경됨에 따라 확장되는지 확인하고 위의 코드 스 니펫을 사용하여 그렇지 않으면 미친 것처럼 보일 수있는 시나리오에서 더보기 좋게 만들 수 있습니다.
일부 레이아웃 (예 : StackOverflow가 모든 공간을 차지한다고 상상해보세요)은 예를 들어 너비에서 매우보기 흉할 것입니다. 1920 픽셀-선 너비가 너무 커서 읽기가 매우 불편할 것입니다.
이것이 바로 그 이유 max-width입니다. 일부 동적 레이아웃에서도 유용성과 가독성을 극대화하려면 사이트의 최대 너비를 제한해야합니다.
또한 더 작은 화면도 고려하십시오.
더 이상 800x600 데스크톱을 사용하는 사람은 없지만 많은 사람들이 해상도가 더 작은 모바일 장치로 웹을 탐색합니다.
이것이 min-width목적입니다. 동적으로 확장 된 레이아웃을 작은 해상도에서 덜 복잡하게 보이게하는 것입니다.
이게 도움이 되길 바란다.
편집하다:
스매싱 책은 주제에 대한 몇 가지 아주 좋은 생각을 가지고있다.
편집 2 :
내 게시물이 방문자에게 픽셀 기반 크기 조정을 강요하는 것처럼 들리는 것을 원하지 않습니다.
(분명히 댓글의 일부 사람들이 그런 식으로 나를 오해했습니다.)
정리하려면 :
이상적인 레이아웃은 가능한 모든 해상도 나 설정에 잘 조정되는 레이아웃이라고 생각합니다.
그러나 우리는 항상 모든 것을 완벽하게 할 수는 없습니다. 시간 / 자원 및 대상 고객은 사이트에 고급 기능이 필요한지 여부를 결정하는 열쇠입니다.
나는 당신이 주어진 직업에 옳은 것을 사용하도록 제안하고 있습니다.
사이트에 대한 고급 조정이 필요한 방문자가 상당 할 사이트를 개발하는 경우 그만한 가치가 있습니다.
(물론 때때로 우리는 일을 옳은 방식으로하는 느낌을 갖기 위해 우리 자신을 위해 그렇게하지만 항상 재정적으로 건전한 결정은 아닙니다.)
그래도 레이아웃을 결정하기 전에 어떤 종류의 사이트가 될 것인지, 누가 방문자가 될 것인지, 그리고 레이아웃을 유동적으로 만들거나 더 역동적으로 만드는 것이 가치가 있는지에 대해 적절한 조사를해야합니다.
모든 측정에는 고유 한 목적이 있습니다.
테두리와 같은 픽셀 기반 사물에 픽셀을 사용 합니다. 1.3422 픽셀 너비로 끝나는 테두리는 원하지 않을 것입니다.
콘텐츠 영역, 레이블 및 입력 상자와 같은 텍스트 기반 항목 에는 텍스트 중심 측정 (em, ex)을 사용합니다 . 특정 길이와 너비의 텍스트를위한 공간을 확보하는 쉬운 방법입니다.
열과 같은 창 기반 항목 에는 백분율을 사용 합니다.
물론 예외가 있습니다. 예를 들어 최소 열 너비를 픽셀 단위로 지정할 수 있습니다. 그러나 위의 내용을 따르면 페이지가 잘 확장됩니다. 항상 페이지를 확대 및 축소하여 다양한 글꼴 크기 및 브라우저 모양에서 작동하는 방식을 확인하십시오. 나중에 놀라지 마십시오.
CSS에서 픽셀로 작업 할 때 발생 하는 문제 를 먼저 이해해야 한다고 생각합니다 .
em및 기타 상대적 크기 만 사용하는 경우 이를 변경하는 사용자 의 결정 을 존중합니다 . 이것은 특히 더 오래된 사용자가있는 경우 텍스트가 많은 사이트에서 특히 중요합니다. 반면에 사이트의 디자인이 중요하다면 px사용성을 해치지 않고 글꼴 크기를 지정 하는 것이 가능하고 정당하다고 생각합니다 .결국 결정을 내려야하고 정확한 상황에 따라 다르지만 글꼴 크기를 픽셀 단위로 지정하는 것은 괜찮다고 생각합니다 .
작업 할 때 그런데, em글꼴 크기를 지정이다 좋은 생각 (가) 설정 body에 font-size: 62.5%. 즉, 기본 글꼴 크기는 10px이므로 1em은 10px, 1.6em은 16px 등으로 ems를 사용하여 디자인하는 동안 픽셀 로 생각 하기가 더 쉽습니다 . 특히 ems의 값이 캐스케이드 될 때 이렇게 작업하는 것이 여전히 답답합니다. 이를 도와주는 PXtoEM.com 과 같은 매우 편리한 사이트가 있습니다 .
화면은 픽셀 기반 레이아웃 이므로 픽셀은 여러 가지 직관적 인 선택입니다. 여기서 주요 문제는 사용자 마다 화면 크기 가 다르다는 것 입니다. 다른 사람들이 지적했듯이 퍼센트 와 함께 min-width및 max-width픽셀을 사용 width하는 것은 화면 크기를 존중하는 동시에 매우 작고 매우 큰 창에서 사이트가 부당하게 찌그러 지거나 늘어나는 것을 방지하는 유용한 방법입니다.
그러나 일반적으로 CSS 미디어 쿼리 를 선호하는이 접근 방식을 피할 것 입니다. 그런 다음 고정 너비 청크를 사용하고 화면 크기가 증가함에 따라 레이아웃을 더 넓게 만들 수 있습니다. 그러나 모든 멋진 웹 기술과 마찬가지로 CSS 미디어 쿼리는 브라우저 지원이 부족합니다. 특히 IE8 및 이전 버전에서는 JavaScript 수정 사항이 있지만 지원하지 않습니다. 반면에 iPhone 및 기타 핸드 헬드 장치는 이러한 장치를 지원하므로 이러한 장치에서 사이트를 멋지게 보이게하려면 강력하게 권장합니다.
고정 너비 그리드가 괜찮다고 생각 합니다 . 960 그리드 시스템과 같은 고정 너비 그리드 시스템 은 그 자체로 충분히 인기가 있으며 고정 너비를 가진 다른 사이트가 너무 많아서 이렇게하면 많은 불만을들을 수있을 것 같지 않습니다. 큰 화면이없는 핸드 헬드 장치는 문제가되지만 CSS 미디어 쿼리를 사용해야하는 곳이므로 모든 것을 픽셀로 지정 하고 데스크탑과 iPhone에서 사이트가 아름답게 보이도록 할 수 있습니다.
궁극적으로 모든 것은 사용자가 누구인지, 무엇을 지원해야하는지, 사이트가 어떤 모습을 원하는지에 따라 다르지만 CSS에서 픽셀을 사용하는 데 본질적으로 잘못된 것은 없습니다 .
기본적으로 그것은 누가 당신을 고용하고 결과적으로 당신의 작업 청중에 달려 있습니다. 제도적 목적을 위해 (정부 프로젝트와 같이 콘텐츠가 형태보다 우세해야하는 경우) .em 또는 %로 작업하는 것이 더 좋으며 제어하기가 더 어렵지만 접근성 측면에서 실제로 사용자 친화적입니다.
기업 웹 사이트 (모양이 거래되는 곳)에 대해 이야기한다면 픽셀은 브랜드에 대한 고객의 기대를 충족시키는 더 정확한 도구가 될 것입니다. 유동적 인터페이스 (%, .em)는 현명하게 처리 할 때 항상 좋은 것입니다.하지만 극한 조건에서 디자인을 확인하고 안정적이라는 것을 잊지 마십시오.
픽셀로 작업하는 경우 사이트의 최종 모양을 절대적으로 제어 할 수 있지만 일부 사용자가 픽셀을 효율적으로 사용하는 것은 불가능하다고 가정해야합니다.
최선의 선택 : 모든 플랫폼과 호환되는 웹 사이트를 디자인하는 것보다 (다중 결함이있는 디자인으로 이어질 것임) 고객에게 모든 요구에 맞게 조정 된 사이트의 특수 버전을 제안하는 것보다 디자이너에게 더 나은 방법과 더 나은 비즈니스를 제안하십시오. ..
이것은 제가 전에 여러 번 물어 본 좋은 질문입니다. 하드 코어 웹 디자이너가 아닙니다 (저는 개발 측면에 더 가깝습니다). 저는 일반적으로 함께 일하는 디자이너에게 그들의 의견에 대해 물었습니다.
요소의 크기를 조정하기 위해 백분율 대 픽셀을 사용하는 것은 실제로 개인적인 취향이나 각 특정 경우의 요구 사항의 문제입니다. 확장을 위해 필요하거나 확장이 잘 될 경우 백분율을 사용하십시오. 그렇지 않은 경우 픽셀을 사용하십시오. 여기 사람들은 페이지의 주요 열의 예를 사용하여 유동적이어야 할 수도 있지만 테두리에는 픽셀 측정의 정밀도가 필요할 수 있습니다.
분명히 이미지 크기 조정은 해상도 및 픽셀 단위와 거의 관련이 있으므로 항상이 경우에 사용합니다.
그러나 텍스트에 대해 em 크기 조정 대 픽셀 또는 포인트 크기 조정을 사용하는 것은 완전히 다른 물고기 주전자입니다. 내가 함께 일하는 대부분의 사람들은 글꼴 크기에 대한 기본 재설정 스타일을 사용하여 1em 크기를 약 12px로 줄입니다. 그런 다음 다른 모든 곳 (또는 가능한 한 거의 모든 곳)에서 ems를 사용하여 텍스트 요소의 크기, 양식 컨트롤 등을합니다. 데스크톱과 랩톱의 다양한 브라우저, OS 및 DPI에서 잘 작동하는 것처럼 보이기 때문에 지금도 이렇게 작동합니다. 그래도 모바일 장치를 보증 할 수 없습니다.
하지만 접근성이 핵심입니다. 장애가있는 사람들이 사용할 수있는 것을 만들거나 다양한 장치에서 즉시 작업해야하는 경우, 오래된 것으로 간주 할 수있는 항목도 확장이 필요합니다. 처음부터 사이트를 디자인하기 위해 모델에 빌드하면이 경우 절대 픽셀 크기 조정이 필요하지 않다는 것을 알 수 있습니다.
예를 들어, 예술이 많은 디자인은 아마도 단일 규모로 디자인 될 것이지만, 장애 사용자를위한 새로운 교육 웹 사이트는 다양한 상황에서 작업해야 할 것입니다.
W3C는 유연성이라는 이유로 크기 조정 및 확장을위한 다양한 방법을 사양에 적용했습니다. 청중에게 가장 적합하고 잘 작동하는 것은 무엇이든하십시오 (Moustard가 앞서 말했듯이).
나는 css / html 전문가는 아니지만 내가 사용하는 규칙은 외부 컨테이너에 픽셀을 사용하고 내부 개체에 백분율을 사용하는 것입니다.
내 레이아웃을 검토하는 사람과 함께 가지고있는 또 다른 경험 규칙은 Three Pixel Rule 입니다. 모든 것이 모든 브라우저 내에서 정확히 정렬되는 경우는 거의 없습니다. 우리는 노력이 3 픽셀 이하를 이동하는 이점보다 크다는 데 동의했습니다.
기본적으로 올바른 일을하십시오. 사용자가 자바 스크립트를 비활성화하고 기본 설정 쿠키를 사용하지 않고 사이트를 방문하는 경우 가능한 한 기능적이고 액세스 할 수있는 웹 페이지를 제공해야합니다.
귀하의 기본 스타일 시트는 브라우저 창에 대해 아무것도 생각하지 않고, 여전히 아래에서 320x320 해상도, 기능 페이지, 그러나 끔찍한 렌더링, 최대 무제한의 크기로한다. 사진 충실도가 너무 중요하여 브라우저 크기 조정을 신뢰할 수없는 경우도 있고 때로는 그렇지 않은 경우 고정 된 크기의 이미지를 캡슐화하는 요소에 대해 픽셀 측정 (최소한 최소값)을 사용하여 다음과 같이 끝나지 않도록해야합니다. 중요한 것들이 은폐되고 있습니다. 백분율과 함께 최소 너비를 지정하면 사용자에게 필요한 접근성을 제공하면서 필요한 제어 기능을 제공해야합니다. 접근성이 지금은 문제가되지 않더라도 사이트가 성공하면 나중에 문제가 될 것입니다.
당신이하면 할 수록 브라우저 창에 대해 알고, 다음은 대체 스타일 시트에 고정 폭을 사용하는 괜찮아 경우 디자인 정당화에게 추가 작업을 보존의 중요성.
대부분의 경우 픽셀을 선호합니다. 예 : 콘텐츠의 기본 너비는 960px입니다. "1024"에서는 화면 양쪽에 작은 여유 공간이 있으면 괜찮습니다. 거기에 약간의 그라디언트 또는 배경을 넣으십시오. "1280", "1440"또는 "1680"또는 기타-더 크고 더 큰 간격이 있지만 멋지게 보일 것입니다. 예, 800의 경우-이 사이트는 추악 할 것입니다. 하지만 누가 신경 쓰나요? 모든 주요 플레이어는 800에 대한 지원을 중단했습니다.이 해상도를 가진 사람이 너무 적습니다 ..
그러나 %%가 훨씬 더 나은 솔루션이 될 다양한 사이트가 많이 있습니다.
화면의 구성 요소는 픽셀입니다. 고정 된 픽셀 크기로 잘못 갈 수 없습니다. 다른 포스터에서 언급했듯이 확장 가능한 대체물로 백분율 또는 "em"을 사용할 수도 있습니다.