CSS에서 '줌'은 무엇을합니까?
일부 jQuery 플러그인의 CSS 규칙에서 '확대'설명자를 사용하고 w3c 웹 사이트를 살펴보고 확대하는 데 사용된다는 사실을 발견했지만 실제로 어떻게 구현할 수 있습니까? 아니면 뷰포트를 정의해야합니까? 그런 뷰포트를 어떻게 정의합니까? 아니면 내가 모든 것에 대해 틀렸습니까?
다음과 같이 사용할 수 있습니까?
a {
zoom:1;
}
a:hover {
zoom:2;
}
Zoom은 CSS 사양에 포함되어 있지 않지만 IE, Safari 4, Chrome에서 지원됩니다 (그리고 -moz-transform: scale(x)
3.5 이후 Firefox에서도 비슷한 효과를 얻을 수 있습니다 ). 를 참조하십시오 여기 .
따라서 모든 브라우저는
zoom: 2;
zoom: 200%;
개체를 2 배 확대하므로 크기를 두 배로 늘리는 것과 같습니다. 즉,
a:hover {
zoom: 2;
}
마우스를 올리면 <a>
태그가 200 % 확대됩니다.
내가 말했듯이 FireFox 3.5+ use -moz-transform: scale(x)
에서는 거의 동일한 작업을 수행합니다.
편집 :의 의견에 대한 응답으로 완전한 대체가 아니라고 thirtydot
말할 것 scale()
입니다. 확장되지 않고 zoom
다른 콘텐츠를 방해하지 않고 상자 밖에서 콘텐츠 위로 확장됩니다. 여기 에서 실제 동작을 확인 하십시오 . 또한 zoom
Opera에서는 지원되지 않는 것 같습니다 .
이 게시물은 scale
jQuery를 사용하여 비 호환성을 해결하는 방법과 해결 방법에 대한 유용한 통찰력을 제공합니다 .
hasLayoutzoom: 1;
을 트리거하여 대부분의 IE 전용 버그를 해결하기 위해 IE6-7에 유용하다고 아무도 언급하지 않았다는 사실 에 놀랐습니다 .
이 속성은 현재 요소의 확대 수준을 제어합니다. 요소의 렌더링 효과는 카메라의 "확대 / 축소"기능입니다. 이 속성은 상속되지 않더라도 자식 요소의 렌더링에 영향을줍니다.
예
div { zoom: 200% }
<div style=”zoom: 200%”>This is x2 text </div>
zoom은 여기에 설명 된대로 @viewport 설명자에 대한 css3 사양입니다.
http://dev.w3.org/csswg/css-device-adapt/#zoom-desc
전체 뷰포트 ( '화면')를 확대하는 데 사용됩니다. 또한 많은 브라우저에서 개별 요소를 확대 / 축소하지만 전부는 아닙니다. css3는 이러한 효과를 얻기 위해 transform : scale을 사용해야한다고 지정합니다.
http://www.w3.org/TR/css3-transforms/#transform-functions
그러나 지원하는 브라우저의 '요소 확대 / 축소'와는 약간 다르게 작동합니다.
IE와 WebKit만이 확대 / 축소를 지원하며 이론적으로는 당신이 말하는 것을 정확히 수행합니다.
전체 효과를 확인하려면 이미지를 사용해보십시오. :)
CSS zoom
속성은 현재 전체 브라우저 인구의 86 % 이상으로 널리 지원됩니다.
참조 : http://caniuse.com/#search=zoom
document.querySelector('#sel-jsz').style.zoom = 4;
#sel-001 {
zoom: 2.5;
}
#sel-002 {
zoom: 5;
}
#sel-003 {
zoom: 300%;
}
<div id="sel-000">IMG - Default</div>
<div id="sel-001">IMG - 1X</div>
<div id="sel-002">IMG - 5X</div>
<div id="sel-003">IMG - 3X</div>
<div id="sel-jsz">JS Zoom - 4x</div>
Joshua M이 지적했듯이 확대 / 축소 기능은 Firefox에서만 지원되지 않지만 다음과 같이 간단히 수정할 수 있습니다.
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}
참고 URL : https://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css
'developer tip' 카테고리의 다른 글
라텍스 매우 콤팩트 항목 화 (0) | 2020.12.08 |
---|---|
vba 문자열이 숫자 인 경우 문자열을 int로 변환 (0) | 2020.12.08 |
원격 git 브랜치를 로컬 저장소로 깔끔하게 가져오고 복사하는 방법 (0) | 2020.12.08 |
VS2012에서 NuGet 패키지를 프로젝트 참조로 추가하는 가장 좋은 방법은 무엇입니까? (0) | 2020.12.08 |
iOS – Wi-Fi를 통해 빌드 실행 / 디버그 / 설치 (0) | 2020.12.08 |