미디어 쿼리는 화면 대신 div 요소를 기반으로 크기를 조정할 수 있습니까?

317

미디어 쿼리를 사용하여 div요소 의 크기에 따라 요소 의 크기를 조정 하고 div싶습니다. 웹 페이지 내의 위젯처럼 사용되며 화면 크기가 다를 수 있으므로 화면 크기를 사용할 수 없습니다 .

최신 정보

https://github.com/ResponsiveImagesCG/cq-demos 에 대한 작업이 진행중인 것 같습니다.

css  media-queries 
— Yazz.com
소스
2
나는이 질문이 너무 짧아서 좋은 대답을 얻지 못한다고 생각합니다. 아마도 당신이하려는 일의 예를 제공 할 수 있습니까? 어쩌면 jsfiddle.net 을 사용 하여 아이디어를 테스트하고 다른 사람들이 도와 줄 수 있습니까? 일반적으로 요구하는 이유가 없어야하며 미디어 쿼리없이 CSS로 원하는 결과를 얻을 수 있어야합니다. 글꼴에 백분율 치수와 em을 사용하여 중첩 요소의 크기를 조정할 수 있습니다. 그러나 아마도 더 잘 이해하기 위해 HTML 코드와 CSS의 예를보아야합니까?
— BenSwayne
1
위젯의 크기는 어떻게 다를 수 있습니까? 뷰포트가 1024px 이상인 페이지 너비가 고정되어 있습니까 (예 : 960px) 둘 다 유동적입니까? 불분명하고 알아두면 도움이 될 것입니다.
— FelipeAls
3
사실, 내 현재 프로젝트는 비슷한 상황입니다. 항목 목록은 와이드 장치의 경우 2 콜 레이아웃으로, 좁은 장치의 경우 1 콜 레이아웃으로 표시되지만 단일 항목은 1 콜 레이아웃으로 표시됩니다. 목록과 단일 버전 모두 상당히 넓고 짧은 2 개의 요소를 가지고 있습니다. 더 넓은 장치에서 두 요소는 나란히 가장 좋습니다. 이상적으로는 좁은 장치 : 항상 수직, 넓은 장치 : 항상 평행, 중간 (1 또는 2-col에 따라 다름) : 수직 또는 병렬. 플로팅은 간단한 해결책이지만 레이아웃에 따라 너비도 달라야합니다.
— cimmanon
1
LESS는 CSS로 컴파일되므로 CSS가 지원하지 않으면 LESS도 도움을 줄 수 없습니다.
— jvannistelrooy
3
링크가 더 이상 활성화되지 않습니까?
— mix3d

답변:

228

아니요, 미디어 쿼리는 페이지의 요소를 기반으로 작동하도록 설계되지 않았습니다. 장치 또는 미디어 유형을 기반으로 작동하도록 설계되었으므로 미디어 쿼리 라고 합니다. width, height및 기타 차원 기반 미디어 기능은 모두 화면 기반 미디어에서 뷰포트 또는 장치 화면의 크기를 나타냅니다. 페이지의 특정 요소를 나타내는 데 사용할 수 없습니다.

div페이지에서 특정 요소 의 크기에 따라 스타일을 적용해야하는 경우 div미디어 쿼리 대신 해당 요소 의 크기 변화를 관찰하기 위해 JavaScript를 사용해야 합니다.

— BoltClock
소스
미디어 쿼리에 함수를 사용하여 포함 요소에서 크기를 얻을 수있는 방법에 대해 들었습니다. 이것을 미디어 쿼리와 결합하여 요소 크기를 조정할 수있는 방법이 있습니까?
— Yazz.com
1
JS를 사용하여 주기적으로 요소의 너비를 얻고 그에 따라 반응해야합니다 (주기적으로 = 1 초마다 또는 일부 브라우저가 느려질 수 있습니다. 따라서 = 가장 빠른 방법을 원하면 위젯을 스타일링하는 클래스를 전환하여).
— FelipeAls
6
이를 기본적으로 달성하려면 @element쿼리 가 필요 합니다. W3C가 운율 / 이유에 대한 좋은 문서가 @media쿼리 : w3.org/TR/css3-mediaqueries/#width가 (이 링크 폭을 논의 섹션으로 이동 --- 미디어 타입의 폭이 아닌 요소에 포함)
— 도슨
이메일에서 작동시킬 가능성이 있습니까? 컨테이너 div가 너무 작을 때 (예 : Gmail 데스크톱 버전 이메일 공간이 너무 작아서 창 크기 조정으로 인해 2 열 디자인에 맞지 않을 때) 이메일에 모바일 스타일을 적용하려고합니다.
— Lev
그건 그렇고, @element 쿼리는 CSS를 Turing 완전한 언어로 만들 것입니다.
— Nick
117

이 목표를 달성하기 위해 자바 스크립트 shim을 만들었습니다. 원하는 경우 살펴보십시오. 이는 개념 증명이지만주의하십시오. 초기 버전이므로 여전히 일부 작업이 필요합니다.

https://github.com/marcj/css-element-queries

— 마크 제이 슈미트
소스
5
감사합니다, 감동합니다
— Yazz.com
5
이것은 믿기 힘든 일이야. 반응 형 부트 스트랩과 결합하여 @media로는 달성 할 수없는 멋진 일을하고 있습니다. 잘 했어.
— Aku
3
당신은 우리의 생명을 구했습니다
— Broda Noel
와우, 정말 좋은 일이 훨씬 쉬워집니다
— kaiser
멋있는. 질문이 있습니다. 이제이 플러그인은 min-width속성을 갱신 해야하는 요소를 감지 합니다. min-width갱신이 가능한 CSS 클래스 목록, 표시된 요소를 수동으로 작성해야 합니까?
— Alexander Goncharov
38

iframe 내부의 미디어 쿼리는 요소 쿼리로 작동 할 수 있습니다. 나는 이것을 성공적으로 구현했다. 아이디어는 Zurb의 Responsive Ads 에 관한 최근 게시물에서 나왔습니다 . 자바 스크립트가 없습니다!

— 하드 닌
소스
미디어 쿼리가 iframe 내에서 작동하기 때문에 이것이 최선의 해결책이라고 생각합니다.
— emfi
25

@BoltClock이 허용 된 답변에 썼기 때문에 현재 CSS로는 불가능하지만 JavaScript를 사용하여 해결할 수 있습니다.

이런 종류의 문제를 해결하기 위해 컨테이너 쿼리 (일명 요소 쿼리) prolyfill을 만들었습니다. 다른 스크립트와 약간 다르게 작동하므로 요소의 HTML 코드를 편집 할 필요가 없습니다. 스크립트를 포함시키고 CSS에서 다음과 같이 사용하면됩니다.

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill

— 아우시
소스
2
JS로 가득합니다. 목표는 CSS에서만 기능을 수행하는 것입니다.
— Green
13
Prolyfill (및 polyfills )은 일반적으로 아직 브라우저에서 지원하지 않는 기능을 활성화하기 위해 JS로 작성됩니다. Prolyfill의 목표는 CSS에서이 기능이 지원되면 더 이상 사용되지 않는 것입니다.
— ausi
3
@ius에는 질문에“CSS 만”에 대한 언급이 없습니다. 그 결론을 어떻게 얻었습니까?
— ausi
1
당신을 제외하고 @ius은 어차피 CSS의 솔루션 외부를 제공하는 것은 완벽하게 합리적이다, 그래서 아마도 CSS에서 그것을 할. "당신은 할 수 없다"보다 훨씬 낫다;)
— 웨슬리 스미스
1
내 의견 후 @ DelightedD0D 그는 답변을 변경하고 변경 사항에 +1 투표했습니다. 현재 답변은 CSS로는 불가능하다는 것을 말하고 있기 때문에 괜찮습니다.
— ius
17

나는 몇 년 전에 같은 문제에 부딪 쳤고 일을 도와주는 플러그인 개발에 자금을 지원했다. 플러그인을 오픈 소스로 출시하여 다른 사람들도 혜택을 볼 수 있으며 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까지 잘 보이도록 하나의 위젯을 디자인 할 수 있습니다. 그러면 모든 사이트의 템플릿을 사용하여 모든 페이지의 사이드 바에 위젯을 놓을 수 있습니다.

— 혁신
소스
1
좋은 프로젝트! 나는 당신이 무엇을했는지 살펴 보았습니다
— Yazz.com
@innovati 요소에 대한 쿼리를 수행하는 방법을 찾는 동안이 게시물을 찾았습니다. 작동하지 않는 것 같습니다. 내 티켓 좀 봐 줄래? github.com/eqcss/eqcss/issues/96
— Andrew Newby
10

레이아웃 관점에서 현대 기술을 사용하는 것이 가능합니다.

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 단어로 자세하게 설명하고 있으며 읽는 것이 좋습니다.

— 지브
소스
Heydon의 기사에서 나온 것은 ... 마술처럼 보이고 작동합니다! 답변 주셔서 감사합니다, 굉장합니다.
— ptyskju
2
이 질문에 걸려 넘어지는 모든 사람이 찾는 답변입니다.
— TehShrike
7

질문은 매우 모호합니다. 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가 필요합니다.

— 시마 논
소스
47
그 질문은 전혀 모호하지 않습니다. 사실, 그것은 매우 좋은 질문입니다. 불행히도 그것에 대한 좋은 대답은 없습니다.
— stepanian
2
이 접근 방식을 사용하여 끔찍한 유지 보수.
— Totty.js
4

내가 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 */
}
— 루 멜리 스 조지
소스
아니요, 화면에서보기 흉하게 보입니다. 화면 크기는 더 빠르게 변경되지만 화면에 요소가 나중에 나타납니다.
— Green
3

나는 또한 미디어 쿼리를 생각하고 있었지만 이것을 발견했다.

다음 <div>과 같이 백분율 값 으로 래퍼 를 만드십시오 padding-bottom.

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
<div></div>
스 니펫 확장

A의이됩니다 <div>(3 종횡비 4)의 높이와 그 컨테이너의 폭의 75 % 이상.

이 기술은 또한 미디어 쿼리 및 페이지 레이아웃에 대한 약간의 임시 지식과 결합되어 더욱 세밀한 제어가 가능합니다.

내 필요에 충분합니다. 어느 것이 당신의 필요에도 충분할 것입니다.

— 헨디이라 완
소스
2

ResizeObserver API를 사용할 수 있습니다 . 아직 초기 단계이므로 아직 모든 브라우저에서 지원하지는 않습니다 (그러나 그에 도움이되는 몇 가지 polyfill이 있습니다).

기본적으로이 API를 사용하면 이벤트 리스너를 DOM 요소의 크기 조정에 첨부 할 수 있습니다.

데모 1 - 데모 2

— 호세 살가도
소스
초안 사양에 대한 폴리 필이 있습니다. github.com/juggle/resize-observer
— Trevor Karjanis
Heydon의 기사는 이에 대한 예제 구현을 제공합니다. 페이지의 "ResizeObserver"검색 : heydonworks.com/article/the-flexbox-holy-albatross
— Gabe Rogan
0

내 경우에는 div의 최대 너비를 설정하여이를 수행 했으므로 작은 위젯의 경우 영향을받지 않으며 최대 너비 스타일로 인해 큰 위젯의 크기가 조정됩니다. 

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
— 재키 추
소스
이 질문에 따르면 위젯 크기가 다를 수 있으며 최대 너비를 설정하면 컨테이너가 넓은 경우 위젯의 크기가 변경되지 않습니다. .widget위젯의 div에 대한 클래스 인 샘플 일뿐입니다.
— Jacky Choo
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.