Web sayfasının tamamını CSS ile nasıl ölçeklendirebilirim?

Firefox'u kullanarak, düğmesine basarak tüm web sayfasını büyütebilirsiniz CTRL +. Bunun yaptığı, tüm web sayfasını (yazı tipleri, resimler vb.) Orantılı olarak büyütmektir.

Sadece CSS kullanarak aynı işlevselliği nasıl çoğaltabilirim?

Gibi bir şey var mı page-size: 150%(sayfa bölümlerinin tamamını% x artıracak mı?)

zoomIE 5.5+, Opera ve Safari 4 ve Chrome'da desteklenen CSS özelliğini kullanabilirsiniz

Kullanabilir miyim: css Zoom

Firefox, Zoom'u ( burada bugzilla öğesi ) desteklemeyen tek büyük tarayıcıdır, ancak Firefox 3.5'te "tescilli" -moz-transform özelliğini kullanabilirsiniz .

Böylece şunları kullanabilirsiniz:

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

Bu oldukça geç bir cevap, ama kullanabilirsiniz

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

% 110 büyütmek için zoomStil orada olmasına rağmen , Firefox hala ne yazık ki desteklemiyor.

Ayrıca, bu sizin zoom'unuzdan biraz farklıdır. css transformO ancak sayfanızı büyütmek böylece, bir görüntü yakınlaştırma gibi değil yeniden akıtma amaç vs. işleri

Düzenle , dönüşüm kaynağını güncelledi.

Eğer CSS tamamen etrafında inşa edilmiştir exveya embirimler, o zaman bu mümkün ve uygulanabilir olabilir. Sadece font-size: 150%tarzınızı beyan etmeniz bodyveyahtml . Bu, diğer tüm uzunlukların orantılı olarak ölçeklenmesine neden olmalıdır. Yine de bir stil elde etmedikçe görüntüleri bu şekilde ölçekleyemezsiniz.

Ama bu çok büyüktür eğer zaten çoğu sitede.

Johannes'in dediği gibi - doğrudan cevabına yorum yapmak için yeterli temsilci değil - bunu, tüm öğelerin "" boyutları yazı tipi boyutunun katı olarak belirtildiği sürece yapabilirsiniz.%, Em veya ex kullandığınız her şey birimleri". Her ne kadar% yazı tipi boyutuna değil, içeren öğeye dayalı olduğunu düşünüyorum.

Ve piksellerden oluştuğu için normalde görüntüler için bu göreceli birimleri kullanmazsınız, ancak bunu daha pratik hale getiren bir hile vardır.

Eğer tanımlarsanız body{font-size: 62.5%};o zaman 1em 10px eşit olacaktır. Bildiğim kadarıyla bu tüm ana tarayıcılarda çalışır.

Ardından (ör.) 100 piksel kare resimlerinizi belirtebilirsiniz width: 10em; height: 10em;ve Firefox'un ölçeklendirmesinin varsayılan olarak ayarlandığını varsayarsak, resimler doğal boyutlarında olacaktır.

Marka body{font-size: 125%};ve resimler dahil olmak üzere her şey orijinal boyutunun iki katı olacaktır.

Bu kod ile 1em veya% 100 vücut yüksekliğinin% 1'ine eşit olacaktır

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

 * {
transform: scale(1.1, 1.1)
}

bu sayfadaki her öğeyi dönüştürür

Jon Tan bunu kendi sitesiyle yaptı - http://jontangerine.com/ Görüntüler dahil her şey EMS'de ilan edildi. Her şey. İstenilen etki bu şekilde elde edilir. Metin yakınlaştırma ve ekran yakınlaştırma neredeyse aynı sonucu verir.

CSS isteğe bağlı olarak yakınlaştırma yapamaz, ancak CSS'yi JS ile birleştirirseniz, bir sayfanın daha büyük görünmesini sağlamak için bazı değerleri değiştirebilirsiniz. Bununla birlikte, söylendiği gibi, bu özellik günümüzde modern tarayıcılarda standarttır: çoğaltmaya gerek yoktur. Aslında, çoğaltmak web sitenizi yavaşlatır (yüklenecek daha fazla şey, ayrıştırmak veya yürütmek ve uygulamak için daha fazla JS veya CSS, vb.)

CSS özellikleri ile tüm sayfayı ölçekler aşağıdaki kodu var. Önemli olan yatay kaydırmayı önlemek için body.style.width değerini yakınlaştırmanın tersine ayarlamaktır. Ayrıca, belgenin sol üst köşesini pencerenin sol üst köşesinde tutmak için dönüştürme başlangıç ​​noktasını sol üst kısma ayarlamanız gerekir.

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