미디어 쿼리를 사용하여 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 */
}답변
나는 몇 년 전에 같은 문제에 부딪 쳤고 일을 도와주는 플러그인 개발에 자금을 지원했다. 플러그인을 오픈 소스로 출시하여 다른 사람들도 혜택을 볼 수 있으며 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까지 잘 보이도록 하나의 위젯을 디자인 할 수 있습니다. 그러면 모든 사이트의 템플릿을 사용하여 모든 페이지의 사이드 바에 위젯을 놓을 수 있습니다.
답변
레이아웃 관점에서 현대 기술을 사용하는 것이 가능합니다.
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 개가 표시되며 각각은 a, b및 3으로 표시되는 주황색 div로 구성 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 단어로 자세하게 설명하고 있으며 읽는 것이 좋습니다.
답변
질문은 매우 모호합니다. 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가 필요합니다.
