Что делает «масштабирование» в CSS?
Я обнаружил, что некоторый jQuery-плагин в своем правиле css использует дескриптор «zoom», я даже просматриваю сайт w3c и обнаружил, что он используется для увеличения, но как я могу его реализовать? Или мне нужно определить какой-то видовой экран? И как определить такой видовой экран? Или я ошибаюсь во всем?
можно ли использовать его как
a { zoom:1; } a:hover { zoom:2; } - Как использовать флажок внутри Выбрать опцию
- Z-индекс Относительный или Абсолютный?
- Как встроить шрифты в CSS?
- Выбор входных и текстовых входов в HTML - лучший способ сделать равную ширину?
- Тень тени для изображения PNG в CSS
- Масштабирование изображения с помощью CSS: есть ли альтернатива webkit для -moz-crisp-edge?
- Воспроизводимые фоновые изображения css
- Как создать дочерние компоненты из css-файла родительского компонента?
- Почему .foo a: link, .foo a: visited {} селектор переопределяет: hover, a: active {} селектор в CSS?
- Скрыть текст с помощью css
- Поплавок: правое отклоняет порядок пролетов
- Как разблокировать маржу?
- Расположите фоновое изображение CSS x пикселей справа?
Масштаб не включен в спецификацию 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 */ }