Làm cách nào tôi có thể chia tỷ lệ toàn bộ trang web bằng CSS?

Sử dụng Firefox, bạn có thể phóng to toàn bộ trang web bằng cách nhấn CTRL +. Những gì nó làm là tỷ lệ phóng to toàn bộ trang web (phông chữ, hình ảnh, vv).

Làm cách nào để sao chép cùng chức năng bằng CSS đơn giản?

Có cái gì đó giống như page-size: 150%(sẽ tăng toàn bộ phần trang thêm x% không?)

Bạn có thể sử dụng thuộc tính CSS zoom- được hỗ trợ trong IE 5.5+, Opera và Safari 4 và Chrome

Tôi có thể sử dụng: css Zoom

Firefox là trình duyệt chính duy nhất không hỗ trợ Zoom ( mục bugzilla tại đây ) nhưng bạn có thể sử dụng thuộc tính biến đổi "độc quyền" trong Firefox 3.5 .

Vì vậy, bạn có thể sử dụng:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

Đây là một câu trả lời khá muộn, nhưng bạn có thể sử dụng

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

để phóng to trang 110%. Mặc dù zoomphong cách là có, nhưng Firefox vẫn không hỗ trợ nó một cách đáng buồn.

Ngoài ra, điều này hơi khác so với thu phóng của bạn. Các css transformcông việc như phóng to hình ảnh, vì vậy nó sẽ phóng to trang của bạn nhưng không gây ra hiện tượng chỉnh lại, v.v.

Chỉnh sửa cập nhật nguồn gốc biến đổi.

Nếu CSS của bạn được xây dựng hoàn toàn xung quanh exhoặc emđơn vị, thì điều này có thể khả thi và khả thi. Bạn chỉ cần khai báo font-size: 150%theo phong cách của bạn cho bodyhoặc html. Điều này sẽ gây ra mọi độ dài khác để chia tỷ lệ. Tuy nhiên, bạn không thể chia tỷ lệ hình ảnh theo cách này, trừ khi chúng cũng có kiểu dáng.

Nhưng dù sao đó cũng là một vấn đề rất lớn nếu trên hầu hết các trang web.

Như Johannes nói - không đủ đại diện để nhận xét trực tiếp về câu trả lời của anh ấy - bạn thực sự có thể làm điều này miễn là kích thước của tất cả các yếu tố được chỉ định là bội số của kích thước phông chữ. Có nghĩa là, mọi thứ bạn sử dụng%, em hoặc ex các đơn vị". Mặc dù tôi nghĩ rằng% dựa trên việc chứa phần tử, không phải cỡ chữ.

Và thông thường bạn sẽ không sử dụng các đơn vị tương đối này cho hình ảnh, vì chúng bao gồm các pixel, nhưng có một mẹo giúp việc này trở nên thực tế hơn rất nhiều.

Nếu bạn xác định body{font-size: 62.5%};thì 1em sẽ tương đương với 10px. Theo tôi biết điều này hoạt động trên tất cả các trình duyệt chính.

Sau đó, bạn có thể chỉ định (ví dụ) hình ảnh vuông 100px của mình với width: 10em; height: 10em;và giả sử tỷ lệ của Firefox được đặt thành mặc định, hình ảnh sẽ có kích thước tự nhiên.

Tạo body{font-size: 125%};và mọi thứ - bao gồm cả hình ảnh - sẽ có kích thước gấp đôi ban đầu.

Với mã này 1em hoặc 100% sẽ bằng 1% chiều cao cơ thể

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

điều này sẽ biến đổi mọi yếu tố trên trang

Jon Tan đã làm điều này với trang web của mình - http://jontangerine.com/ Tất cả mọi thứ bao gồm cả hình ảnh đã được tuyên bố trong ems. Mọi điều. Đây là cách đạt được hiệu quả mong muốn. Thu phóng văn bản và thu phóng màn hình mang lại kết quả gần như chính xác.

CSS sẽ không thể phóng to theo yêu cầu, nhưng nếu bạn kết hợp CSS với JS, bạn có thể thay đổi một số giá trị để làm cho trang trông lớn hơn. Tuy nhiên, như đã nói, tính năng này là tiêu chuẩn hiện nay trong các trình duyệt hiện đại: không cần phải sao chép nó. Như một vấn đề thực tế, việc sao chép nó sẽ làm chậm trang web của bạn (nhiều thứ cần tải hơn, nhiều JS hoặc CSS hơn để phân tích hoặc thực thi và áp dụng, v.v.)

Tôi có đoạn mã sau chia tỷ lệ toàn bộ trang thông qua các thuộc tính CSS. Điều quan trọng là đặt body.style. Thong thành nghịch đảo của thu phóng để tránh cuộn ngang. Bạn cũng phải đặt gốc biến đổi thành trên cùng bên trái để giữ phía trên bên trái của tài liệu ở trên cùng bên trái của cửa sổ.

        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 + "%";
        }