Масштабировать элементы можно используя css свойство zoom
. Но свойство CSS Zoom, поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.
Firefox - единственный браузер, который не поддерживает css свойство zoom
. Начиная с Firefox 3.5 рекомендуется использовать css свойство с префиксом -moz-transform
.
Пример:
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}
Это уже работает во всех современных браузерах. scale
необходимо задать параметиры (X, Y), например (0,5).
-moz-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
Преобразование может оставить пустое пространство вокруг элемента, который получил меньший размер после визуализации (преобразование применяется после визуализации), и для минимизации проблем пустого интервала мы можем использовать transform-origin
CSS.
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
Значения можно так же указывать в %
и px
Рекомендуется добавить максимальную высоту - max-height
элементу или отрицательный margin-bottom
.
Что такое связывание объектов? Это создание события, которое отражается на другом объекте на веб-странице. При этом событие может отражаться также и на первом объекте. Для создания достаточно использовать только CSS, так что это интересный и не ресурсоёмкий способ.
Мне приходилось встречать довольно много разные способы определения мониторов retina. Одни являются объемными, другие наоборот. Давайте рассмотрим, какие из media quires изпользовать для ретинизации.
Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель.