CSS 응답 디자인의 5가지 팁
"이동 우선" 방법을 선택하여 응답성 설계를 진행하다
응답식 디자인의 가장 좋은 방법은 먼저 사이트의 모바일 버전을 디자인하는 것이다.
이렇게 하면 작은 화면에서 이미지, 텍스트, 로고 및 기타 요소의 모양을 볼 수 있습니다.
만약 그것들의 디스플레이에 문제가 없다면, 당신은 아무런 문제가 없을 것이며, 당신의 디자인을 더욱 큰 화면에 적응시킬 것이다.
응답은 이 메타태그부터 시작합니다
응답식 디자인을 시작하는 첫 번째 줄 코드는 페이지의 시작 부분에 놓여 있습니다.응답 제목부터 시작하여 이 코드를 HTML 페이지의 제목에 두어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
포괄적 개념
1. 최소(최소)
min 쉼표로 구분된 표현식 목록에서 최소(최소) 값을 선택합니다.예를 들어
min(1rem, 50%, 10vw)의 경우 브라우저는 이러한 상대 단위 중 어느 것이 가장 작은지 계산하고 이 값을 실제 값으로 사용합니다.
참조 - web.dev 평가판 codepen
2. 최대(최대)
max() 함수는 쉼표로 구분된 표현식 목록에서 최대값을 선택합니다.예:
max(50vw, 400px), 브라우저에서 각각 가장 큰 값을 결정합니다.
참조 - web.dev 평가판 codepen
3. 클립 값(클립)
clamp()는 min()와 max() 기능의 조합으로 세 가지 파라미터를 받아들인다.clamp(45ch, 50%, 75ch) 이렇게 하면 브라우저에서 단락의 폭을 결정할 수 있습니다.50%가 45ch보다 작지 않으면 너비를 50%로 설정합니다. 이때 45ch를 선택하고 50%가 75ch보다 크면 그 반대입니다.
참조 - web.dev 평가판 codepen
4. 박스 사이즈
CSS의 하느님 속성 중 하나는 반응 장애를 극복하는 것이 상자 크기라는 것이다.그것은 응답식 사이트 개발의 기본 속성이다.
1. 내용 상자
상자의 크기는 내용에 따라 정성껏 설계될 것이다.모바일 기기에서 사이트를 볼 때 내용 상자는 사이트를 굴리는 내용에 따라 증가한다.
2. 경계 상자
폭을% 로 설정한 요소에 테두리 상자를 사용하면 채우기를 고려하기 때문에 더 이상 폭을 조정할 필요가 없습니다.
이 기교는 말할 것도 없이 CSS3을 지원하는 모바일 사이트와 브라우저에 가장 적합하다.
참조 - Pocket Gopher 평가판 codepen
5. 오버플로우 속성
Overflow: hidden는 편리한 CSS 속성으로 호응성 디자인을 제외하고 많은 경우에도 유용하다.div를 지울 필요가 없습니다. 넘침 값을hidden으로 설정하면 용기를 지울 수 있습니다.
Overflow: hidden 스크롤 내용이 아닌 값을 숨깁니다.
이것을 시험해 보세요codepen .
추가 팁
응답 그림
HTML은 추가된 미디어 질의에 따라 표시할 정확한 이미지 리소스를 지정할 수 있는 요소를 제공합니다.
일반적으로 크고 해상도가 높은 버전의 이미지를 모든 화면 크기로 보내고 뷰포트 너비로 축소하지 않고 특정 상황에 사용할 이미지 세트를 지정합니다.
<picture>
<source media="(max-width:1000px)" srcset="picture-lg.png">
<source media="(max-width:600px)" srcset="picture-mid.png">
<source media="(max-width:400px)" srcset="picture-sm.png">
<img src="picture.png" alt="picture">
</picture>
여기서 그림의 다음 최대 버전인picture lg를 정의했습니다.png, 최소 버전까지 크기를 내림차순으로 줄입니다. 그림sm.파푸아뉴기니.
이 방법에서는 미디어 조회를 사용하지만 응답 동작을 구동하는 것은 요소 자체이지 CSS에서 단점을 정의하는 것이 아닙니다.
도구책
https://web.dev/min-max-clamp/
만약 이 글이 매우 유용하다고 생각한다면 트위터에서 나를 주목해 주세요.언제든지 저에게 연락하여 당신의 생각과 건의를 공유해 주십시오.
Reference
이 문제에 관하여(CSS 응답 디자인의 5가지 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/code_rams/5-tips-for-css-responsive-design-34mb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
