미디어는 격자를 사용하여 그다지 집중되지 않은 내용을 조회한다.
div에 의존한다. 그러나 브라우저가 CSS 격자를 광범위하게 사용하면서 나는 이를 실현하는 방법을 시도해 왔다. html 구조나 미디어 조회를 바꾸는 데 의존하지 않고일부 선택한 요소가 장치 전체 너비로 확장될 수도 있습니다.저희가 뭘 만들고 있어요.
실현된 세부 사항을 토론하기 전에 우리는 먼저 간단한 구조 예시를 보아야 한다.이러한 기술을 사용하는 웹 사이트가 많을 수 있지만 다음은 우리의 목표를 설명하기 위한 예제 화면 캡처입니다.
보시다시피 이동 뷰포트의 페이지 내용은 거의 화면 가장자리까지 뻗어 있고, 데스크톱의 한쪽은 더 넓게 채워져 있습니다.이 두 가지 상황에서 그림은 모두 화면의 전체 너비이다.컨텐트는 지정된 임계값에 도달할 때까지 화면에 따라 크기를 조정한 다음 폭의 화면 중심에 유지됩니다.
HTML 시작
이 간단한 예에서, 우리는 하나의 페이지를 사용할 것이다. 이 페이지는 제목, 두 단락, 그리고 화면의 전체 넓이로 뻗은 이미지가 있다.HTML은 다음과 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
<title>Centred Content</title>
<link href="./style.css" rel="stylesheet"/>
</head>
<body>
<main>
<h1>Some Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam rhoncus eleifend sapien, ac commodo libero cursus vitae.
Nullam tempus velit et mi ultrices pretium. Cras pretium neque quis varius faucibus.
Aenean sapien est, malesuada sit amet bibendum vitae, sollicitudin quis mauris.
Aliquam at hendrerit tortor. Nullam vitae lacus id odio faucibus laoreet ut lobortis turpis.
Pellentesque consectetur vehicula sapien, a laoreet ex tristique nec. Phasellus sit amet diam risus.
Cras egestas faucibus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam elementum ut nibh vitae aliquet.</p>
<img class="full-bleed" src="./img/image.png" alt="Placeholder image" />
<p>Vestibulum posuere lorem diam, in sodales diam pharetra et.
Fusce consectetur vehicula elit a dapibus. Phasellus quis lacinia nisl.
Suspendisse mattis molestie ullamcorper. Praesent cursus dolor nec gravida tristique.
Nullam a est ut mauris tristique congue sit amet in urna.
Mauris in eros vitae metus gravida porta.</p>
</main>
</body>
</html>
div를 추가해야 했지만 grid를 사용하면 깨끗한 HTML를 유지할 수 있다.또한 일부 기본 CSS에서 기본 브라우저 등록 정보를 재설정합니다.html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0 auto;
}
메쉬 추가
레이아웃의 첫 번째 단계는
main 요소를 격자 용기로 만드는 것이다.그 다음에 우리는 그것을 3열로 설정하고, 중간 열은 내용에 사용되며, 각 변의 열은 채우기에 사용된다.main {
display: grid;
grid-template-columns: 2rem 1fr 2rem;
grid-auto-rows: auto;
}
main 요소의 하위 요소를 시도한다는 것을 의미할 것이다.우리가 채우기 위해 추가한 두 개의 반 너비를 포함한다.이것은 겹치는 요소와 아래 화면 캡처가 보여준 일반적인 혼란을 초래할 것이다.
컴포넌트를 올바르게 배치합니다.
이를 바로잡으려면 브라우저가
main의 모든 하위 요소를 격자에 배치할 위치를 나타낼 수 있습니다.main > * {
grid-column: 2 / span 1;
}
main > .full-bleed {
grid-column: 1 / span all;
}
main > * 선택기를 사용하여 main의 모든 하위 항목은 두 번째 열에서 시작하여 한 열을 뛰어넘어야 한다고 성명합니다.그리고 .full-bleed 클래스가 있는 모든 내용은 첫 번째 열에서 시작하여 모든 열을 뛰어넘는다. (실제로는 부모 열의 전체 너비를 뛰어넘는다.)이제 페이지가 다음과 같이 표시되어야 합니다.
최대 컨텐츠 폭 추가
이런 레이아웃은 비교적 작은 장치에서 잘 작동하지만 내용의 수평 충전은 시종 2rem이다.기본적으로 우리는 격자를 사용하여 하나의 구조를 풀고
full-bleed 요소의 마이너스 간격을 채워서 쉽게 실현할 수 있다.미디어 조회에서 grid-template-columns 의 main 값을 덮어쓸 수 있지만,grid는 자동으로 계산할 수 있는 max 값을 지원합니다.이 설정을 설정하려면 rulset을 main로 변경합니다.main {
display: grid;
grid-template-columns: max(2rem, (100% - 80ch) / 2) 1fr max(2rem, (100% - 80ch) / 2);
grid-auto-rows: auto;
}
max로 계산하는 것이다.Max는 두 개의 값을 취하고 쉼표로 구분하며 비교적 높은 값을 계산합니다.오른쪽의 계산((100% - 80ch) / 2)은 상당히 복잡해 보이기 때문에 분해해 봅시다.이 예에서는 화면 너비가 1200px라고 가정합니다.(1200px - 80ch) / 2으로 바뀌었다.ch는 숫자0의 너비로 어떤 글씨체를 사용하든지 하나의 너비를 설정할 수 있으며 이 너비는 비슷한 문자수이다.우리의 예에서, 이를 100%에서 제거함으로써, 우리는 옆열이 최대 내용의 너비 (우리의 예에서 1200px-1006px) 를 제거한 후 화면에 남은 모든 내용을 원한다는 것을 말한다.
결론
이 기술의 장점은 vw 단원을 사용하지 않기 때문에 한 개 이상의 사이드바가 있고
main 요소가 모든 화면을 다 사용하지 않은 상황에서도 작업을 할 수 있다는 것이다.미디어 쿼리가 부족하다는 것은 한 번에 선택할 수 있는 내용의 폭을 설정할 수 있고, 장래에 페이지 레이아웃이 바뀔 염려가 없다는 것을 의미한다.이 점을 실현할 수 있는 다른 방법도 많을 수 있지만, 웹 사이트의 배치를 도울 수 있기를 바랍니다.만약 더 좋은 방법이 있다면, 나에게 말해 주십시오. 왜냐하면 나는 줄곧 나의 스타일시트를 개선하고 간소화하기를 갈망했기 때문입니다.
Reference
이 문제에 관하여(미디어는 격자를 사용하여 그다지 집중되지 않은 내용을 조회한다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bezpowell/media-query-less-centred-content-with-grid-b56텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
