Что делает «масштабирование» в CSS?

Я обнаружил, что некоторый jQuery-плагин в своем правиле css использует дескриптор «zoom», я даже просматриваю сайт w3c и обнаружил, что он используется для увеличения, но как я могу его реализовать? Или мне нужно определить какой-то видовой экран? И как определить такой видовой экран? Или я ошибаюсь во всем?

можно ли использовать его как

a { zoom:1; } a:hover { zoom:2; } 

Масштаб не включен в спецификацию CSS, но поддерживается в IE, Safari 4, Chrome (и вы можете получить несколько схожий эффект в Firefox с -moz-transform: scale(x) с 3.5). См. Здесь .

Итак, все браузеры

  zoom: 2; zoom: 200%; 

будет увеличивать ваш объект на 2, так что это похоже на удвоение размера. Это означает, что если у вас есть

 a:hover { zoom: 2; } 

При наведении тег будет увеличиваться на 200%.

Как я уже сказал, в FireFox 3.5+ используйте -moz-transform: scale(x) , он делает то же самое.

Изменить: в ответ на комментарий от thirtydot я скажу, что scale() не является полной заменой. Он не расширяется в строке, как zoom , скорее, оно будет расширяться из коробки и над контентом, а не заставлять другой контент в стороне. Смотрите здесь в действии. Кроме того, похоже, что в Opera не поддерживается zoom .

Этот пост дает полезную информацию о способах устранения несовместимости со scale и обходными решениями для нее с помощью jQuery.

Удивленный, что никто не упомянул, что zoom: 1; полезен для IE6-7, чтобы решить большинство ошибок только для IE, вызвав hasLayout .

Это свойство управляет уровнем увеличения для текущего элемента. Эффект рендеринга для элемента – это функция «масштабирования» на камере. Несмотря на то, что это свойство не наследуется, оно по-прежнему влияет на рендеринг дочерних элементов.

пример

  div { zoom: 200% } 
This is x2 text

zoom – спецификация css3 для дескриптора @viewport, как описано здесь

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

используется для масштабирования всего windows просмотра («экран»). также происходит масштабирование отдельных элементов во многих браузерах, но не все. css3 указывает преобразование: масштаб должен использоваться для достижения такого эффекта:

http://www.w3.org/TR/css3-transforms/#transform-functions

но он немного отличается от «элементного увеличения» в тех браузерах, которые его поддерживают.

Только IE и WebKit поддерживают масштабирование, и да, в теории он делает именно то, что вы говорите.

Попробуйте на изображении, чтобы увидеть его полный эффект 🙂

Свойство zoom CSS теперь широко поддерживается> 86% от общей численности пользователей браузера.

См .: http://caniuse.com/#search=zoom

 document.querySelector('#sel-jsz').style.zoom = 4; 
 #sel-001 { zoom: 2.5; } #sel-002 { zoom: 5; } #sel-003 { zoom: 300%; } 
 
IMG - Default
IMG - 1X
IMG - 5X
IMG - 3X
JS Zoom - 4x

Как отметил Джошуа М, функция масштабирования не поддерживается только в Firefox, но вы можете просто исправить это, как показано:

 div.zoom { zoom: 2; /* all browsers */ -moz-transform: scale(2); /* Firefox */ } 
  • Проблема с CSS на Twitter Typeahead с Bootstrap 3
  • CSS отличается по-разному на веб-сервере, чем на среде разработки
  • CSS - центр двух изображений в css бок о бок
  • Как работает CSS-специфика?
  • CSS зачеркивает другой цвет из текста?
  • Bootstrap 3 Collapse показать состояние с символом Chevron
  • Bootstrap изменяет порядок div с помощью pull-right, pull-left на 3 столбца
  • Могу ли я иметь несколько: перед псевдоэлементами для одного и того же элемента?
  • Есть ли способ применить стиль CSS для параметров HTML5 datalist?
  • FontAwesome - выбор правильного семейства шрифтов в псевдоэлементах CSS
  • Как исправить ошибку Internet explorer 7 при использовании процентной ширины для макета?
  • Interesting Posts

    Как обрезать строку .NET?

    Как удалить символы подчеркивания в именах полей с помощью logstash?

    Как заставить Windows правильно масштабировать панель задач после переключения на мониторы с разными DPI?

    Как перенести текущее активное окно с одного монитора на другой с помощью сочетания клавиш?

    Почему псевдонимы в неинтерактивной оболочке Bash не работают

    Мне нужно закрыть () как FileReader, так и BufferedReader?

    друг И встроенный метод, в чем смысл?

    Показать диалоговое окно с анимацией, растущей с точки

    Преобразование двоичной строки в целое число

    Как протестировать источник питания?

    Нижняя панель кнопок в android

    Как сравнить двоичные файлы в Linux?

    ExecutorService, который прерывает задачи после таймаута

    C # JSON.NET – десериализация ответа, использующего необычную структуру данных

    Возможно ли, что мой ноутбук закрыт, потому что мой мобильный телефон слишком близко?

    Давайте будем гением компьютера.