다른 해상도 (분리 된 장치)가 너무 많아서 대부분의 가이드 및 자습서는 % 및 em에 고정 값보다 의존하기 때문에 사이트를 다시 디자인하고 있습니다. 나는 이것을 배우기 때문에 모든 것을 주변에서 읽고있다.반응 형 디자인에서 % 단위를 사용할 때 요점은 무엇입니까?
생각해 보면 다른 크기의 디스플레이로 문제를 해결할 수 있지만 몇 가지 구체적인 문제를 해결하기 위해 CSS를 더 만들어야합니다.
추가 디스플레이 크기에 대한 미디어 쿼리를 추가해야하는 이유는 무엇입니까? %는 정말 코딩을 줄이기 위해 사용합니까? 일부 크기에 대한 추가 CSS를 추가해야 할 필요가 있습니까? 아니면 잘못된 것을하고 있습니까?
어떤 조언을 주셔서 감사합니다!
em 크기를 사용하는 목적은 사용자가 선택한 글꼴 크기에서 디자인 기준을 벗어나는 것을 허용하는 것입니다. 거대한 모니터와 가난한 시력을 가지고 있기 때문에 더 큰 글꼴을 사용하는 반면 다른 누군가는 작은 글꼴을 선호 할 수 있습니다. em 단위를 사용하면 글꼴 크기를 지정된 표준 (예 : "12 포인트 글꼴")으로 변경하는 대신 디자인에서 글꼴 기본 설정과 그에 따라 크기를 조정할 수 있습니다.
퍼센트 (%) 단위는 디자인이 다른 브라우저 크기에 응답 할 수 있도록합니다. em 단위와 함께 사용하면 텍스트 기반 요소가 임의의 글꼴 크기 선택에 응답하고 레이아웃 요소가 임의의 브라우저 크기에 응답 할 수 있습니다.
모든 미디어 유형에 대해 단일 반응 형 디자인을 디자인해도 무방합니다. Media queries은 서로 다른 디스플레이 스타일을 다른 장치에 사용하려는 경우 이 아닌은 다른 디스플레이 크기를 "지원"합니다. 예를 들어 유용성 조사에서 이러한 글꼴이 이러한 종류의 미디어에 우선적으로 사용됨을 알 수 있기 때문에 디스플레이 미디어의 인쇄 용지 및 산 세리프 글꼴의 경우 세리프 글꼴을 사용하는 것이 좋습니다.
또한 모바일 장치와 같은 일부 상황에 맞게 사용자 지정 스타일링을 수행 할 수 있습니다. 사용자가 대역폭의 양이 제한되어 있고 추가 이미지를 줄일 수 있다고 생각할 수 있습니다. 또는 특정 휴대 전화에서 제공하는 현미경 화면과 완전히 다른 레이아웃으로 콘텐츠를 표시하려는 경우
설명 주셔서 감사합니다. 미디어 쿼리를 사용하지 않고도 잘 맞는 응답 구조를 만드는 것이 더 어렵습니다. Im'facing의 가장 큰 문제점은 thoug 너비는 %이고 고정 된 크기로 패딩을 설정했기 때문에 제대로 작동하지 않습니다. – Diana
%을 사용하면 사이트가 사용자의보고 방법에 반응 할 수 있습니다. 너 div이 100%에 있다고 가정 해 보겠습니다. 휴대 전화 나 데스크톱에 상관없이 전체 섹션을 채 웁니다.
크기에 CSS를 추가해도 괜찮습니다. 내가 아는 한, 일부 요소는 에 표시하고 일부는 고정 된 px 값으로 표시 할 수 있습니다. 단, 일 수도 있고 일 수도 있습니다. 페이지가 설정되는 방식 또는 표시되는 대상에 따라 다릅니다.
예를 들면.
귀하의 웹 사이트 헤더의 너비는 950px입니다. 하지만 휴대 기기에서는 450px로 맞을 수 있습니다.
그래서 media-query를 사용하여 일부 요소의 위치를 변경하고 크기 문제를 처리하고 헤더 너비를 450px로 설정합니다.
% 값을 사용하는 경우 상위 항목의 너비가 100 %가되도록 머리글 div를 설정할 수 있습니다. 그래서 여러분은 몸이나 컨테이너 div의 너비 만 변경할 수 있습니다. 모든 자식들은 적응할 것입니다.
다이애나,
나는이 질문에 대해 기뻤습니다. 문자 그대로 글꼴 크기와 너비에 관한 90 %의 백분율을 사용하는 첫 반응 형 디자인을 그대로 업로드했습니다. 아래 밖으로
이확인 : 분명히 http://www.noxinnovations.com/portfolio/responsive/
, 그것은 놀라운 보이지 않는, 이미지 장소에서 길을 보인다 ...하지만 나에게 부탁을 천천히함으로써, 브라우저 창 크기를 조정 작고 작다. 나는 백분율 너비를 설정함으로써 그것을했다!
나를 신뢰해라. 나는이 반응 형 디자인 테스트를 픽셀로 시도해 보았지만, 너무 잘 풀리지 않았다. 백분율 너비는 해상도 및 픽셀 크기 (본질)와 관계없이 디자인이 항상 화면 크기에 맞도록합니다. 또한 CSS3 미디어 쿼리를 사용할 필요는 없지만 필요할 때만 CSS3 미디어 쿼리를 사용하는 것이 좋습니다.
내 의견으로는, 나는 아마 더 큰 스크린을위한 매체 질문이 있어야한다.
나는 이것이 당신을 도왔을 때 도움이되기를 바랍니다. 고맙습니다. 아론
뭔가 '10px '라고 말하면 변경 될 여지가 없습니다. 하지만 '1em'또는 '50 %'라고 말하면 다른 것들에 전적으로 의존하게되어 유동적이고 유연한 변화를 가져옵니다. –