Korzystając z przeglądarki Firefox, możesz powiększyć całą stronę internetową, po prostu naciskając CTRL +. Powoduje to proporcjonalne powiększenie całej strony internetowej (czcionki, obrazy itp.).
Jak mogę powielić tę samą funkcjonalność używając prostego CSS?
Czy jest coś takiego page-size: 150%
(co zwiększyłoby całą stronę o x%?)
Odpowiedzi:
Możesz być w stanie użyć
zoom
właściwości CSS - obsługiwanej w IE 5.5+, Opera i Safari 4 oraz ChromeCzy mogę użyć: css Zoom
Firefox jest jedyną dużą przeglądarką, która nie obsługuje Zoom ( tutaj pozycja bugzilla ), ale możesz użyć "własnościowej" właściwości -moz-transform w Firefoksie 3.5 .
Możesz więc użyć:
źródło
To dość późna odpowiedź, ale możesz użyć
aby powiększyć stronę o 110%. Chociaż
zoom
styl istnieje, Firefox nadal go niestety nie obsługuje.Jest to również nieco inne niż zoom.
css transform
Działa jak zoom obrazu, więc będzie zwiększyć swoją stronę, ale nie przyczyną reflow, etc.Edycja zaktualizowała początek transformacji.
źródło
transform
. Dziękuję za komentarz.transform-origin: 0 0;
robi to, co chcę. Na przykład, aby powiększyć stronę 150%:transform: scale(1.5); transform-origin: 0 0;
. Uważam, że w innym przypadku dobra odpowiedź @kumar_harsh powinna zostać poprawiona.transform-origin
. To, co napisałem, to tylko jeden przykład tego, jakiej wartości użyć. Oczywiście możesz swobodnie korzystać,transform-origin: 0 0
jeśli pasuje do twojego przypadku użycia (lub jeśli nie obchodzi cię, co jest w prawym dolnym rogu)Jeśli Twój CSS jest zbudowany całkowicie wokół
ex
lubem
jednostek, może to być możliwe i wykonalne. Wystarczy, że zadeklarujeszfont-size: 150%
w swoim stylu dlabody
lubhtml
. Powinno to spowodować proporcjonalne skalowanie wszystkich innych długości. Nie możesz jednak skalować obrazów w ten sposób, chyba że one również otrzymają styl.Ale i tak jest to bardzo duże, jeśli w większości witryn.
źródło
%
,em
lubex
jednostek.Jak mówi Johannes - za mało przedstawiciela, by skomentować bezpośrednio jego odpowiedź - rzeczywiście możesz to zrobić, o ile wymiary wszystkich elementów są określone jako wielokrotność rozmiaru czcionki. Oznacza to, że wszystko, w którym użyłeś%, em lub ex jednostki ”. Chociaż myślę, że% opiera się na elemencie zawierającym, a nie na rozmiarze czcionki.
I normalnie nie używałbyś tych jednostek względnych do obrazów, biorąc pod uwagę, że składają się one z pikseli, ale istnieje sztuczka, która sprawia, że jest to o wiele bardziej praktyczne.
Jeśli zdefiniujesz,
body{font-size: 62.5%};
1em będzie równoważne 10px. O ile wiem, działa to we wszystkich głównych przeglądarkach.Następnie możesz określić swoje (np.) Kwadratowe obrazy o
width: 10em; height: 10em;
wielkości 100 pikseli z i zakładając, że skalowanie Firefoksa jest ustawione na domyślne, obrazy będą miały naturalny rozmiar.Marka
body{font-size: 125%};
i wszystko - w tym obrazy - będzie miało podwójny oryginalny rozmiar.źródło
Z tym kodem 1em lub 100% będzie równe 1% wysokości ciała
źródło
to przekształci każdy element na stronie
źródło
Jon Tan zrobił to ze swoją witryną - http://jontangerine.com/ Wszystko, w tym obrazy, zostało zadeklarowane w ems. Wszystko. W ten sposób osiąga się pożądany efekt. Powiększenie tekstu i powiększenie ekranu dają prawie taki sam wynik.
źródło
CSS nie będzie w stanie powiększyć na żądanie, ale jeśli połączysz CSS z JS, możesz zmienić niektóre wartości, aby strona wyglądała na większą. Jednak, jak już powiedziano, ta funkcja jest obecnie standardem w nowoczesnych przeglądarkach: nie ma potrzeby jej replikowania. W rzeczywistości jego replikacja spowolni twoją witrynę (więcej rzeczy do załadowania, więcej JS lub CSS do przeanalizowania lub wykonania i zastosowania itp.)
źródło
Mam następujący kod, który skaluje całą stronę za pomocą właściwości CSS. Ważne jest, aby ustawić body.style.width na odwrotność powiększenia, aby uniknąć przewijania w poziomie. Musisz także ustawić źródło transformacji na lewy górny róg, aby pozostawić lewy górny róg dokumentu w lewym górnym rogu okna.
źródło