2011-09-01 5 views
7

게시물의 내용이 div에로드되는 편집기를 만들고 jQuery 선택기를 사용하여 내용을 인라인으로 편집 할 수 있습니다.Media 특정 div의 너비에 대한 쿼리와 비슷한 동작

서식 파일의 스타일링에 응답 성을 추가하려고 할 때 장애물이 발생했습니다. 서식 파일의 스타일 시트에 미리보기 영역의 특정 ID를 사용하여 스타일 적용 위치를 지정합니다 . 게시물의 본문 태그에 동일한 ID를 적용하여 편집기의 미리보기와 게시물의 전체보기가 동일하게 보이도록합니다.

보기 측면에서 일부 미디어 쿼리를 넣었으며 미리보기 페이지에서 미리보기가 화면의 전체 너비를 차지하지 않기 때문에 @media screen and (max-width: 640px)과 다르게 동작합니다.

화면 너비가 아닌 미디어 쿼리 선택기를 사용할 수있는 방법이 있나요? 대신 요소의 너비 ... 또는 이와 유사한 항목이 있습니까? 지금 내가 사용하고 들어 또는 자바 스크립트와 단순히 동작을 모방하는 또 다른 방법이있을 수 있습니다 ..

답변

8

현재 미디어 쿼리가 div를 타겟팅하는 방법은 없습니다. 미디어 쿼리는 브라우저 창, 모바일 장치 화면, TV 화면 등을 의미하는 화면 만 타겟팅 할 수 있습니다.

+2

이 라이브러리가 달성하려고하는 것 같아요. https://github.com/tysonmatanich/elementQuery – briangonzalez

+0

흥미 롭습니다. 나는 그것을 생산에서 사용하고있는 누군가를보고 싶다. 요소 쿼리 요구 사항의 일부 기본 문제를 해결할 수있는 것 같습니다. – earl3s

-1

:

.preview { 
    zoom: .8; 
    -moz-transform: scale(0.8);} 

.preview div의 페이지 폭의 80 %입니다. 일반적으로 작동하지만 몇 가지 문제가 있습니다. 문제의 div가 항상 페이지 너비의 %로 설정되지는 않기 때문에 완전히 유연하지 않습니다.

관련 문제