미디어 쿼리는 화면 대신 div 요소를 기반으로 크기를 조정할 수 있습니까?
미디어 쿼리를 사용하여 div요소 의 크기에 따라 요소 의 크기를 조정 하고 div싶습니다. 웹 페이지 내의 위젯처럼 사용되므로 화면 크기를 사용할 수 없으며 크기가 다를 수 있습니다.
최신 정보
https://github.com/ResponsiveImagesCG/cq-demos 에 대한 작업이 진행중인 것 같습니다.
아니요, 미디어 쿼리는 페이지의 요소를 기반으로 작동하도록 설계되지 않았습니다. 장치 또는 미디어 유형 에 따라 작동하도록 설계되었으므로 미디어 쿼리 라고 합니다. width, height및 기타 차원 기반 미디어 기능은 모두 화면 기반 미디어에서 뷰포트 또는 장치 화면의 크기를 나타냅니다. 페이지의 특정 요소를 나타내는 데 사용할 수 없습니다.
div페이지에서 특정 요소 의 크기에 따라 스타일을 적용해야하는 경우 div미디어 쿼리 대신 해당 요소 의 크기 변화를 관찰하기 위해 JavaScript를 사용해야 합니다.
이 목표를 달성하기 위해 자바 스크립트 shim을 만들었습니다. 원하는 경우 살펴보십시오. 이는 개념 증명이지만주의하십시오. 초기 버전이므로 여전히 일부 작업이 필요합니다.
https://github.com/marcj/css-element-queries
iframe 내부의 미디어 쿼리는 요소 쿼리로 작동 할 수 있습니다. 나는 이것을 성공적으로 구현했다. 아이디어는 Zurb의 Responsive Ads 에 관한 최근 게시물에서 나왔습니다 . 자바 스크립트가 없습니다!
@BoltClock이 허용 된 답변으로 작성한 것처럼 현재 CSS로는 불가능하지만 JavaScript를 사용하여 해결할 수 있습니다.
이런 종류의 문제를 해결하기 위해 컨테이너 쿼리 (일명 요소 쿼리) prolyfill을 만들었습니다. 다른 스크립트와 약간 다르게 작동하므로 요소의 HTML 코드를 편집 할 필요가 없습니다. 스크립트를 포함시키고 CSS에서 다음과 같이 사용하면됩니다.
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
나는 몇 년 전에 같은 문제에 부딪 쳤고 일을 도와주는 플러그인 개발에 자금을 지원했다. 플러그인을 오픈 소스로 출시하여 다른 사람들도 혜택을 볼 수 있으며 Github에서 https://github.com/eqcss/eqcss를 얻을 수 있습니다.
페이지의 요소에 대해 알 수있는 내용에 따라 다양한 반응 형 스타일을 적용 할 수있는 몇 가지 방법이 있습니다. EQCSS 플러그인으로 CSS로 작성할 수있는 몇 가지 요소 쿼리가 있습니다.
@element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
그렇다면 EQCSS에서 반응 형 스타일에 어떤 조건이 지원됩니까?
웨이트 쿼리
- 최소 너비
px - 최소 너비
% - 최대 너비
px - 최대 너비
%
높이 쿼리
- 최소 높이
px - 최소 높이
% - 최대 높이
px - 최대 높이
%
검색어 수
- 최소 문자
- 최대 문자
- 최소 라인
- 최대 라인
- 미성년자
- 최대 어린이
스페셜 셀렉터
EQCSS 요소 쿼리 내에서 스타일을보다 구체적으로 적용 할 수있는 세 가지 특수 선택기를 사용할 수도 있습니다.
$this(쿼리와 일치하는 요소)$parent(쿼리와 일치하는 요소의 부모 요소)$root(문서의 루트 요소<html>)
요소 쿼리를 사용하면 개별 반응 형 디자인 모듈에서 레이아웃을 구성 할 수 있으며 각 모듈은 페이지에 표시되는 방식에 대한 '자기 인식'이 있습니다.
EQCSS를 사용하면 너비 150px에서 너비 1000px까지 잘 보이도록 하나의 위젯을 디자인 할 수 있습니다. 그런 다음 위젯을 모든 사이트의 템플릿을 사용하여 모든 페이지의 사이드 바에 자신있게 놓을 수 있습니다.
질문은 매우 모호합니다. BoltClock이 말했듯이 미디어 쿼리는 장치의 크기 만 알고 있습니다. 그러나 미디어 쿼리를 내림차순 선택기와 함께 사용하여 조정을 수행 할 수 있습니다.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
@media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
@media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
다른 유일한 솔루션은 JS가 필요합니다.
내가 CSS로 원하는 것을 성취 할 수 있다고 생각할 수있는 유일한 방법은 위젯에 유체 컨테이너를 사용하는 것입니다. 컨테이너 너비가 화면의 백분율 인 경우 미디어 너비를 사용하여 컨테이너 너비에 따라 스타일을 지정할 수 있습니다. 이제 각 화면의 크기에 대해 컨테이너의 크기를 알 수 있습니다. 예를 들어, 컨테이너를 화면 너비의 50 %로 결정한다고 가정 해 봅시다. 그런 다음 화면 너비가 1200px 인 경우 컨테이너가 600px임을 알 수 있습니다.
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
@media (max-width: 1200px) {
/* your css for 600px container */
}
나는 또한 미디어 쿼리를 생각하고 있었지만 이것을 발견했다.
다음 <div>과 같이 백분율 값 으로 래퍼 를 만드십시오 padding-bottom.
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}<div></div>A의이됩니다 <div>(3 종횡비 4)의 높이와 그 컨테이너의 폭의 75 % 이상.
이 기술은 또한 미디어 쿼리 및 페이지 레이아웃에 대한 약간의 임시 지식과 결합되어 더욱 세밀한 제어가 가능합니다.
내 필요에 충분합니다. 어느 쪽도 당신의 요구에 충분할 수 있습니다.
내 경우에는 div의 최대 너비를 설정하여이를 수행 했으므로 작은 위젯의 경우 영향을받지 않으며 최대 너비 스타일로 인해 큰 위젯의 크기가 조정됩니다.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
레이아웃 관점에서 현대 기술을 사용하는 것이 가능합니다.
Heydon Pickering이 작성했습니다. 그는 여기에 프로세스를 자세히 설명합니다 : http://www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier가 그것을 집어 들고 데모를 통해 작동합니다 : https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
우리가 같은 구성 요소의 3 참조 아래 문제를 재 작성하기 위해 각 레이블 세 개의 오렌지 된 div로 구성 a, b및 c.
두 번째 블록은 가로 방에 제한되어 있기 때문에 세로로 표시되며 상단 구성 요소 3 개는 가로로 배치됩니다.
그것은 사용 flex-basis이 효과를 생성하는 CSS 속성과 CSS 변수.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Heydon의 기사는 1000 단어로 자세하게 설명하고 있으며 읽는 것이 좋습니다.
'IT' 카테고리의 다른 글
| 열거 형을 어떻게 반복 할 수 있습니까? (0) | 2020.03.24 |
|---|---|
| MySQL VARCHAR 최대 크기는 얼마입니까? (0) | 2020.03.24 |
| Spring Security를 사용할 때 Bean에서 현재 사용자 이름 (예 : SecurityContext) 정보를 얻는 올바른 방법은 무엇입니까? (0) | 2020.03.24 |
| NuGet 패키지 위치를 변경할 수 있습니까? (0) | 2020.03.24 |
| "is None"과 "== None"의 차이점은 무엇입니까 (0) | 2020.03.24 |