어떻게 하면 CSS로 전체 웹 페이지를 확장할 수 있습니까?
Firefox를 사용하면 를 +누르기만 하면 전체 웹 페이지를 확대할 수 있습니다.이렇게 하면 전체 웹 페이지(글꼴, 이미지 등)를 비례적으로 확장할 수 있습니다.
어떻게 하면 간단한 CSS를 사용하여 동일한 기능을 복제할 수 있습니까?
그런 것이 있습니까?page-size: 150%(전체 페이지 부분이 x% 증가합니까?)
당신은 CSS를 사용할 수 있을지도 모릅니다.zoom속성 - IE 5.5+, Opera, Safari 4 및 Chrome에서 지원됩니다.
Firefox는 Zoom(bugzilla 항목)을 지원하지 않는 유일한 주요 브라우저이지만 Firefox 3.5에서 "전용" -moz-transform 속성을 사용할 수 있습니다.
그래서 당신은 다음을 사용할 수 있습니다.
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
이것은 다소 늦은 답변이지만, 당신은 사용할 수 있습니다.
body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}
페이지를 110% 확대할 수 있습니다.비록zoom스타일은 거기에 있습니다, 파이어폭스는 여전히 슬프게 그것을 지원하지 않습니다.
또한, 이것은 당신의 줌과는 약간 다릅니다.css transform이미지 줌처럼 작동하므로 페이지가 확대되지만 리플로우 등이 발생하지 않습니다.
편집이 변환 원본을 업데이트했습니다.
만약 당신의 CSS가 완전히 주위에 구성되어 있다면.ex또는em단위, 그러면 이것이 가능하고 실현 가능할 수 있습니다.당신은 단지 선언하기만 하면 됩니다.font-size: 150%에 어울리는.body또는html이렇게 하면 다른 모든 길이가 비례적으로 확장됩니다.하지만 이런 식으로 이미지의 크기를 조정할 수는 없습니다. 그들에게도 스타일이 있지 않으면 말이죠.
하지만 대부분의 사이트에서 이는 매우 큰 문제입니다.
확장은 최상의 옵션이 아닙니다.
마진 패딩 등과 같은 다른 조정이 필요할 것입니다.
하지만 올바른 선택은
zoom: 75%
나는 CSS 속성을 통해 전체 페이지의 크기를 조정하는 다음 코드를 가지고 있습니다.중요한 것은 body.style을 설정하는 것입니다.가로 스크롤을 방지하기 위해 확대/축소의 역방향 너비로 이동합니다.또한 문서의 왼쪽 상단을 창 왼쪽 상단으로 유지하려면 변환 원점을 왼쪽 상단으로 설정해야 합니다.
var zoom = 1;
var width = 100;
function bigger() {
zoom = zoom + 0.1;
width = 100 / zoom;
document.body.style.transformOrigin = "left top";
document.body.style.transform = "scale(" + zoom + ")";
document.body.style.width = width + "%";
}
function smaller() {
zoom = zoom - 0.1;
width = 100 / zoom;
document.body.style.transformOrigin = "left top";
document.body.style.transform = "scale(" + zoom + ")";
document.body.style.width = width + "%";
}
Johannes가 말했듯이 -- 그의 답변에 직접적으로 언급하기에는 충분한 대리인이 아닙니다. -- 모든 요소의 "차원이 글꼴 크기의 배수로 지정되는 한 실제로 이 작업을 수행할 수 있습니다.즉, %, em 또는 ex 단위를 사용한 모든 항목입니다."비록 %는 글꼴 크기가 아닌 포함 요소를 기준으로 한다고 생각합니다.
그리고 이 상대적인 단위들은 픽셀로 구성되어 있기 때문에 보통 이미지에 사용하지는 않겠지만, 이것을 훨씬 더 실용적으로 만드는 속임수가 있습니다.
당신이 경우는정을 정의한다면.body{font-size: 62.5%};그러면 1em은 10ppm에 해당합니다.제가 알기로는 이것은 모든 메인 브라우저에서 작동합니다.
100px 사각형 영상을 " " " " (" " " " " " " " " " " " 으로 지정할 수 있습니다 " " " " " " 를 할 수 .width: 10em; height: 10em;Firefox의 배율이 기본값으로 설정되어 있다고 가정하면 이미지는 자연스러운 크기가 됩니다.
만들다body{font-size: 125%};그리고 이미지를 포함한 모든 것은 원래 크기의 두 배가 될 것입니다.
크로스 브라우저 호환성:
아래의 예:
<html><body class="entire-webpage"></body></html>
.entire-webpage{
zoom: 2;
-moz-transform: scale(2);/* Firefox Property */
-moz-transform-origin: 0 0;
-o-transform: scale(2);/* Opera Property */
-o-transform-origin: 0 0;
-webkit-transform: scale(2);/* Safari Property */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0; /* Standard Property */
}
이 코드를 사용하면 1em 또는 100%가 차체 높이의 1%와 같습니다.
document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Jon Tan은 자신의 사이트 http://jontangerine.com/ 에서 이미지를 포함한 모든 것이 ems로 선언되었습니다.전부다.이렇게 하면 원하는 효과를 얻을 수 있습니다.텍스트 확대/축소와 화면 확대/축소는 거의 동일한 결과를 산출합니다.
CSS는 수요를 확대할 수 없지만 CSS와 JS를 결합하면 페이지를 더 크게 보이도록 일부 값을 변경할 수 있습니다.그러나 이미 말했듯이 이 기능은 현대 브라우저에서 표준으로 사용되고 있으므로 복제할 필요가 없습니다.사실, 그것을 복제하는 것은 당신의 웹사이트를 느리게 할 것입니다 (로드할 더 많은 것들, 구문 분석하거나 실행하고 적용할 더 많은 JS 또는 CSS 등).
* {
transform: scale(1.1, 1.1)
}
이것은 페이지의 모든 요소를 변환할 것입니다.
확대/축소 속성을 스타일로 설정해야 합니다.이제 흥미로운 부분은 그것을 계산하는 방법입니다.이게 제가 한 일입니다.
let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;
실제 장치 너비에 대한 현재 창 너비의 비율을 계산합니다.그런 다음 이 값을 최상위 HTML 요소 확대/축소 속성으로 설정합니다.는 다을사용최상위 HTML 있소수습다니액을 사용하여 할 수 .document.firstElementChild
는 이코를안넣수있다니습을 안에 수 .window.onresize이에 따라 전체 페이지를 확대/축소할 수 있습니다.
확대/축소 시 공백을 방지하기 위해 메인 래퍼 div의 높이를 100%로 설정합니다.
언급URL : https://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css
'source' 카테고리의 다른 글
| 판다 데이터 프레임에서 NaN을 사용하여 행의 정수 인덱스 찾기 (0) | 2023.08.22 |
|---|---|
| "R을 변수로 확인할 수 없음"? (0) | 2023.08.22 |
| 페이지 C# ASP.NET 새로 고침 (0) | 2023.08.22 |
| 기본 HTML/CSS 링크 색상은 무엇입니까? (0) | 2023.08.22 |
| 회사 프록시 .pac 뒤에서 npm 사용 (0) | 2023.08.22 |