Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

CSS справочное руководство

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

Адаптивный веб-дизайн - Viewport

Что такое Viewport?

видовых пользовательские страницы видимой области.

видовой экран можно перевести на китайский язык под названием "просмотра."

Мобильный браузер страница в виртуальном окне "" (окна просмотра), как правило, это виртуальное "окно" (окно просмотра) шире, чем экран, так что вы не должны сжать каждой странице небольшое окно (это будет никаких повреждений макета оптимизирован для страницы мобильного браузера), пользователь может панорамирования и масштабирования для просмотра различных частей страницы.


Установка Viewport

окно просмотра мета-тег для общей мобильной оптимизированной веб-страницы выглядит следующим образом:


  • ширина: контролировать размер окна просмотра, значение может быть задано, если 600, или специальное значение, такие как устройства ширины ширины устройства (в пикселях CSS масштабируется до 100% времени).
  • высота: ширина и соответствует заданной высоте.
  • Первоначальный масштаб: начальный масштаб, то есть, когда в первый раз масштаб загрузки страницы.
  • Максимальный масштаб: позволяет пользователю, чтобы увеличить до максимального коэффициента.
  • Минимальное значение шкалы: Позволяет пользователю масштабировать минимальный масштаб.
  • пользователь масштабируемые: может ли пользователь может вручную увеличить.

Следующий пример демонстрирует использование окна просмотра, используя окно просмотра, а не на мобильных побочных эффектов:

Пример 1 не было добавлено окно просмотра: Нажмите для просмотра

Пример 2, добавить видовой экран: Нажмите , чтобы посмотреть

Если вы посещаете на планшете или телефоне, вы можете нажать на, чтобы увидеть эффект.