CSS로 전체 웹 페이지를 확장하려면 어떻게해야합니까?

CSS로 전체 웹 페이지를 확장하려면 어떻게해야합니까?

---

Firefox를 사용하면을 누르기 만하면 전체 웹 페이지를 확대 할 수 있습니다 CTRL +. 이것이하는 일은 전체 웹 페이지 (글꼴, 이미지 등)를 비례 적으로 확대하는 것입니다.

간단한 CSS를 사용하여 동일한 기능을 어떻게 복제 할 수 있습니까?

다음과 같은 page-size: 150%것이 있습니까? (전체 페이지 부분을 x % 증가시킬까요?)

---

zoomIE 5.5 이상, Opera 및 Safari 4 및 Chrome에서 지원되는 CSS 속성 을 사용할 수 있습니다.

사용할 수 있습니까 : CSS 줌

Firefox는 Zoom ( 여기서는 bugzilla 항목 )을 지원하지 않는 유일한 주요 브라우저 이지만 Firefox 3.5에서 "proprietary"-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스타일은 있지만 Firefox는 여전히 슬프게도 지원하지 않습니다.

또한 확대 / 축소와 약간 다릅니다. 는 css transform이 있지만, 페이지를 확대 할 수 있도록, 이미지 줌처럼되지 리플 로우 원인 등을 작동

---

변형 원점을 수정했습니다 .

---

CSS가 완전히 주위 ex또는 em단위로 구성된 경우 이것이 가능하고 가능할 수 있습니다. 또는 font-size: 150%에 대한 스타일 로 선언하면 됩니다 . 이로 인해 다른 모든 길이가 비례 적으로 확장됩니다. 그러나 스타일도 얻지 않으면 이미지 크기를 조정할 수 없습니다.bodyhtml

그러나 그것은 매우 큰의 경우 어쨌든, 대부분의 사이트에서.

---

Johannes가 말한 것처럼 (답변에 직접 의견을 말할 충분한 담당자는 아니지만) 모든 요소의 크기가 글꼴 크기의 배수로 지정되어있는 한 실제로이 작업을 수행 할 수 있습니다. 의미, %, em 또는 ex를 사용한 모든 것 단위 ". 비록 %는 글꼴 크기가 아닌 포함 요소를 기반으로한다고 생각합니다.

그리고 픽셀로 구성되어 있다고 가정하면 이미지에 일반적으로 이러한 상대 단위를 사용하지는 않지만 이것을 더 실용적으로 만드는 트릭이 있습니다.

정의 body{font-size: 62.5%};하면 1em은 10px와 같습니다. 내가 아는 한 모든 기본 브라우저에서 작동합니다.

그런 다음 width: 10em; height: 10em;Firefox의 크기 조정이 기본값으로 설정되어 있다고 가정하면 100px 정사각형 이미지를 지정할 수 있습니다 . 이미지는 원래 크기입니다.

확인 body{font-size: 125%};및 모든 - 이미지를 포함하여 - 더블 원래 크기 줘야 해.

---

이 코드를 사용하면 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)
}

이것은 페이지의 모든 요소를 ​​변형시킵니다

참고 URL : https://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css