Содержание

Как сделать один сайт для всех устройств (Responsive Web Design) / Хабр

Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»

Почему это глупо

Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.

Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.

Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):

Все это называется «Responsive Web Design»

Responsive состоит из следующих техник:

Резиновый макет на основе пропорций (fluid grid)

Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:

.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}

 
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}

Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:

.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}

На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».

Резиновые изображения (fluid images)

Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.

Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.

Подробная оригинальная статья «Fluid Images».

Media queries

Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.

Например, так:

/* начало css */

 

Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).

 
@media only screen and (min-width: 480px) {

 

Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone  и так далее.

 
}

 
@media only screen and (min-width: 768px) {

 

Планшеты в режиме portrait.

 
}

 
@media only screen and (min-width: 992px) {

 

Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.

 
}

 
@media only screen and (min-width: 1382px) {

 

Десктоп с большими разрешениями, телевизоры.

 
}

 

 
/* конец css */

media queries понимают все разумные браузеры. Для ie же есть Respond.js

Mobile first

Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.

Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.

Подробнее о Mobile first

Ссылки

1. Русскоязычный блог о Responsive Web Design

2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.

Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8

Полизаполнение, которое я обычно использую для добавления поддержки медиазапросов в устаревшие версии браузера Internet Explorer, рассчитано только на min-width и max-width. Существуют более солидные полизаполнения, добавляющие поддержку широкого диапазона медиазапросов, однако для адаптивных веб-дизайнов удобно использовать написанный Скоттом Джелом (Scott Jehl) сценарий Respond. js, являющийся простым в применении и быстрым решением, которое всегда хорошо служило мне.

Сценарий Respond. js (Https://github.com/scottjehl/Respond) на самом деле можно использовать без Modernizr — нужно просто подключить его к соответствующей странице и, как выражается сам автор, «запустить браузер Internet Explorer и сделать радостное движение сжатыми в кулаки руками».

Итак, перед тем, как интегрировать Respond. js с Modernizer, подключим его. Добавим Respond. js прямо в нашу страницу (сразу после файла Modernizer, который мы уже внедрили) и проверим, позволил ли он добиться нужного нам результата в Internet Explorer. Для этого нужно скачать соответствующий файл, поместить его в подходящую папку и указать ссылку на него в разделе <head>:

<head>

<meta charset=utf-8>

<meta name=»viewport» content=»width=device-width, initialscale=1.0, maximum-scale=1″

/>

<title>And the winner isn’t…</title>

<link href=»css/main. css» rel=»stylesheet» />

<script src=»js/modernizr. js»></script>

<script src=»js/respond. min. js»></scnpt>

</head>

Теперь если мы загрузим страницу в Internet Explorer 8 и изменим размеры окна браузера, то вновь получим наш действующий адаптивный веб-дизайн (рисунок 9.10).

Страница по-прежнему адаптируется к области просмотра

Отлично, мы добавили полизаполнение, которое обеспечивает поддержку медиазапросов min-width и max-width в Internet Explorer, однако есть одна загвоздка: оно теперь начнет задействоваться в каждом браузере, который будет загружать нашу страницу независимо от того, нуждается он в нем или нет. Для решения возникшей проблемы можно добавить условный комментарий, касающийся Internet Explorer, как показано далее:

<! — if lte IE 8]>

<script src=»js/respond. min. js»/></script>

<![endif]—>

Я уверен, что ранее вы уже сталкивались с условными комментариями. Они представляют собой простой способ обеспечить загрузку CSS-u JavaScript-файлов (или даже содержимого), которые будут использоваться только соответствующей версией Internet Explorer. Все прочие браузеры будут считать данный код комментарием и игнорировать его.

В нашем условном комментарии говорится следующее: «Если версия данного браузера ниже или равна (часть lte — less than or equal) Internet Explorer 8 (часть IE 8), то следует задействовать указанный сценарий».

ВСЕ ОБ УСЛОВНЫХ КОММЕНТАРИЯХ.

Если вы захотите узнать больше об условных комментариях, то по следующему URL-адресу найдете полную информацию: http://msdn. microsoft.com/en-us/Nbrary/ms537512%28v=vs.85%29.aspx.

Все это отлично сработает. Однако разве мы хотим засорять свою разметку условными комментариями, созданными специально для Internet Explorer? И как насчет полизаполнений для других браузеров? Именно здесь Modernizr берет ответственность на себя.

Вам также могут быть интересны следующие статьи:

Отзывчивый веб-дизайн | WebReference

Интернет взлетел быстрее, чем кто-либо мог это предсказать и растёт как сумасшедший. За последние несколько лет вдобавок на сцену ворвались мобильники. Рост потребления мобильного Интернета также опережает общий рост использования Интернета.

В наши дни трудно найти человека, который не владеет мобильным устройством или даже несколькими, подключенных к Интернету. В Великобритании больше мобильных телефонов, чем людей и если данный тренд продолжится, то использование мобильного Интернета превзойдёт настольный Интернет в течение года.

С ростом использования мобильного Интернета возникает вопрос о том, как создавать веб-сайты, подходящие для всех пользователей. Индустрия ответила на этот вопрос отзывчивым веб-дизайном.

Обзор отзывчивости

Отзывчивый веб-дизайн является практикой создания веб-сайта, подходящего для работы на любом устройстве с любым размером экрана, независимо от того, насколько он большой или маленький, мобильный или настольный. Отзывчивый веб-дизайн сосредоточен вокруг представления об интуитивном и приятном опыте для каждого. Настольный компьютер и сотовый телефон пользователя, все они выигрывают от отзывчивых сайтов.

Термин отзывчивый веб-дизайн сам по себе придумал и в значительной степени разработал Итан Маркотт. Многое из того, что рассмотрено в этом уроке было впервые сказано Итаном в сети и в его книге Отзывчивый веб-дизайн, которую стоит прочитать.

Рис. 4.01. Food Sense имеет красивый дизайн, отзывчивый при самых разных размерах окна. Независимо от того, насколько экран большой или маленький, сайт Food Sense подстраивается под него, создавая естественный пользовательский опыт.

Отзывчивый, адаптивный и мобильный

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

Отзывчивый и адаптивный веб-дизайн тесно связаны и часто меняются друг с другом местами. Отзывчивый обычно означает реакцию быстро и положительно реагировать на любое изменение, в то время как адаптивный значит легко приспосабливаться к новой цели или ситуации при их изменении. С отзывчивым дизайном сайты постоянно и плавно меняются в зависимости от различных факторов, таких как ширина окна, а адаптивные сайты строятся на группах предустановленных факторов. Сочетание этих двух идеально, обеспечивая идеальную формулу для функциональных сайтов. Какой термин использовать особо не имеет большой разницы.

Мобильный, с другой стороны, как правило, означает создание отдельного сайта обычно на новом домене исключительно для мобильных пользователей. Хотя в этом иногда есть свой смысл, но обычно это не является хорошей идеей. Мобильные веб-сайты могут быть чрезвычайно лёгкими, но они зависят от нового базового кода и поведения браузера, всё это может стать препятствием как для разработчиков, так и для пользователей.

В настоящее время наиболее популярный метод заключается в отзывчивом веб-дизайне, в пользу дизайна, который динамически адаптируется к различным браузерам и устройствам, меняя макет и контент на этом пути. Это решение содержит преимущества всех трёх: отзывчивого, адаптивного и мобильного.

Гибкие макеты

Отзывчивый веб-дизайн разбивается на три основных компонента, включая гибкие макеты, медиа-запросы и гибкий медиа-контент. Первая часть, гибкие макеты — это практика построения макета сайта с гибкой сеткой, которая способна динамически уменьшать размер до любой ширины. Гибкие сетки строятся с использованием относительных единиц длины, как правило, процентов или единиц em. Эти относительные длины затем применяются, чтобы объявить основные значения свойств сетки, таких как width, margin или padding.

Относительные размеры области просмотра

CSS3 ввёл несколько новых относительных единиц длины, в частности, связанных с размером области просмотра браузера или устройства. Эти новые единицы включают vw, vh, vmin и vmax. Общая поддержка этих новых единиц не велика, но она растёт. Со временем они начнут играть большую роль в построении отзывчивых сайтов.

vw
Ширина области просмотра
vh
Высота области просмотра
vmin
Меньшее значение из ширины и высоты области просмотра
vmax
Большее значение из ширины и высоты области просмотра

Гибкие макеты не выступают за использование фиксированных единиц измерения, таких как пиксели или дюймы. Причина в том, что высота и ширина области просмотра непрерывно меняются от устройства к устройству. Макеты сайтов нужно адаптировать к этим изменениям и у фиксированных значений слишком много ограничений. К счастью, Итан вывел простую формулу, которая помогает определить пропорции гибкого макета с помощью относительных значений.

Формула основана на взятии целевой ширины элемента и делении её на ширину родительского элемента. Результатом является относительная ширина целевого элемента.

цель ÷ контекст = результат

Гибкая сетка

Давайте посмотрим, как эта формула работает внутри двухколоночного макета. Ниже у нас есть родитель с классом container, который оборачивает элементы <section> и <aside>. Цель состоит в том, чтобы <section> располагался слева, а <aside> справа, с одинаковыми отступами между ними. Как правило, разметка и стили для этого макета будут выглядеть несколько похоже на следующее.

HTML

<div>
  <section>...</section>
  <aside>...</aside>
</div>

CSS

.container {
  width: 538px;
}
section,
aside {
  margin: 10px;
}
section {
  float: left;
  width: 340px;
}
aside {
  float: right;
  width: 158px;
}

Используя формулу гибкой сетки можно взять все фиксированные единицы длины и превратить их в относительные единицы. В этом примере мы воспользуемся процентами, но единицы em будут работать также хорошо. Заметьте, независимо от того, насколько широким становится родительский container, margin и width для <section> и <aside> масштабируются пропорционально.

section,
aside {
  margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */
}
section {
  float: left;
  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */ 
}
aside {
  float: right;
  width: 29.3680297%;   /* 158px ÷ 538px = .293680297 */
}

Демонстрация гибкой сетки

Взяв идею гибкого макета с формулой и повторно применяя их ко всем частям сетки, мы создадим полностью динамический сайт, масштабирующийся до любого размера области просмотра. Для ещё большего контроля над гибким макетом можно также использовать свойства min-width, max-width, min-height и max-height.

Одного гибкого макета само по себе недостаточно. Порой ширина браузера может быть настолько мала, что даже пропорциональное масштабирование макета будет создавать слишком узкие колонки для эффективного отображения контента. В частности, когда макет становится слишком мал или слишком велик, текст может стать неразборчивым и компоновка может сломаться. В этом случае могут быть использованы медиа-запросы, которые помогут оставить лучшее впечатление.

Медиа-запросы

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

Инициализация медиа-запросов

Есть несколько разных способов применения медиа-запросов — с помощью правила @media в существующей таблице стилей, импорта новой таблицы стилей через правило @import и путём ссылки на отдельную таблицу стилей внутри HTML-документа. Вообще говоря, рекомендуем использовать правило @media внутри существующей таблицы стилей, чтобы избежать каких-либо дополнительных HTTP-запросов.

HTML

<!-- Отдельный CSS-файл -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

CSS

/* Правило @media */
@media all and (max-width: 1024px) {...}

/* Правило @import */
@import url(styles.css) all and (max-width: 1024px) {...}

Каждый медиа-запрос может включать в себя тип носителя, за которым следует одно или несколько выражений. Основные типы носителей включают в себя all, screen, print, tv и braille. Спецификация HTML5 содержит новые типы носителей, включая даже 3d-glasses. Если тип носителя не может быть указан, медиа-запросом по умолчанию будет screen.

Выражение медиа-запроса, которое следует за типом носителя может включать в себя различные мультимедийные функции и значения, которые затем считаются истиной или ложью. Когда медиа-функция и значение истинны, стили применяются. Если медиа-функция и значение ложны, то стили игнорируются.

Логические операторы в медиа-запросах

Логические операторы в медиа-запросах помогают построить мощные выражения. Существуют три разных логических оператора, доступных для использования в медиа-запросах: and, not и only.

Использование логического оператора and в медиа-запросе позволяет добавить дополнительное условие и убедиться, что браузер или устройство одновременно выполняет а, б, в и т. д. Несколько отдельных медиа-запросов могут быть разделены запятой, действуя как негласный оператор or (или). В приведённом ниже примере выбираются все типы носителей с шириной между 800 и 1024 пикселей.

@media all and (min-width: 800px) and (max-width: 1024px) {...}

Логический оператор not отрицает запрос с указанием любого запроса, но только одного. В приведённом ниже примере выражение применяется к любому устройству, у которого нет цветного экрана. Чёрно-белые или монохромные экраны, к примеру, применяться будут.

@media not screen and (color) {...}

Логический оператор only представляет собой новый оператор и не распознаётся браузерами, использующих алгоритм HTML4, что позволяет скрыть стили от устройств или браузеров, которые не поддерживают медиа-запросы. Выражение ниже выбирает только экраны в портретной ориентации на устройствах, способными работать с медиа-запросами.

@media only screen and (orientation: portrait) {...}

Опускаем тип носителя

При использовании логических операторов not и only тип носителя может быть отброшен. В этом случае тип носителя по умолчанию принимается all.

Медиа-функции в медиа-запросах

Знание синтаксиса медиа-запроса и принципов работы логических операторов является прекрасным введением в медиа-запросы, но настоящая работа начинается с медиа-функций. Медиа-функции определяют, какие атрибуты или свойства будут направлены в выражение медиа-запроса.

height и width

Одна из наиболее распространённых медиа-функций вращается вокруг определения высоты или ширины области просмотра устройства или браузера. Высота и ширина могут быть найдены с помощью медиа-функций height, width, device-height и device-width. Каждая из этих медиа-функций также может быть использована с префиксом min или max, вроде min-width или max-device-width.

Функции height и width базируются на высоте и ширине области визуализации, окна браузера, к примеру. Функции device-height и device-width с другой стороны основаны на высоте и ширине выходного устройства, которое может быть больше, чем фактическая область визуализации. Значением этих медиа-функций может быть любая единица длины, относительная или абсолютная.

@media all and (min-width: 320px) and (max-width: 780px) {...}

В отзывчивом дизайне наиболее часто используемые функции включают min-width и max-width. Они помогают построить отзывчивые веб-сайты на компьютерах и мобильных устройствах одинаково, избегая путаницы с особенностями устройств.

Использование префиксов min и max

Префиксы min и max могут быть использованы со многими медиа-функциями. Префикс min указывает значения больше или равно, тогда как префикс max указывает значения меньше или равно. Использование префиксов min и max позволяет избежать конфликта с общим синтаксисом HTML, без специального задействования символов < и >.

orientation

Медиа-функция orientation определяет, находится ли устройство в альбомной (landscape) или портретной (portrait) ориентации. Режим landscape срабатывает, когда дисплей шире, чем высота, режим portrait срабатывает, когда высота дисплея больше ширины. Эта медиа-функция играют роль в основном с мобильными устройствами.

@media all and (orientation: landscape) {...}
aspect-ratio

Функции aspect-ratio и device-aspect-ratio определяют соотношение ширины к высоте в пикселях целевой области визуализации или устройства вывода. Префиксы min и max доступны для использования с различными функциями, выявляя соотношения выше или ниже того, о котором говорится.

Значение функции состоит из двух положительных целых чисел, разделённых косой чертой. Первое число задаёт ширину в пикселях, а второе число задаёт высоту в пикселях.

@media all and (min-device-aspect-ratio: 16/9) {...}

pixel-ratio

Кроме медиа-функции aspect-ratio есть также функция pixel-ratio. Она включает функцию device-pixel-ratio, также с префиксами min и max. В частности, эта функция отлично подходит для определения устройств высокой чёткости, в том числе дисплеев ретина. Медиа-запрос для этого выглядит следующим образом.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}
resolution

Медиа-функция resolution определяет разрешение устройства вывода в виде плотности пикселей, также известной как число точек на дюйм или DPI. Функция resolution также принимает префиксы min и max. Кроме того, функция resolution принимает число точек на пиксель (1.3dppx), точек на сантиметр (118dpcm) и другие размеры на основе значений разрешения.

@media print and (min-resolution: 300dpi) {...}
Другие медиа-функции

Другие функции включают в себя определение доступных выходных цветов с помощью color, color-index и monochrome, выявление растровых устройств через функцию grid, а также определение процесса сканирования телевизора функцией scan. Эти функции менее распространены, но столь же полезны при необходимости.

Поддержка медиа-запросов в браузерах

К сожалению медиа-запросы не работают в Internet Explorer 8 и ниже, а также других устаревших браузерах. Есть, однако, пара подходящих костылей написанных на JavaScript.

Respond.js представляет собой облегчённый костыль, он ищет только min/max-width и должен идеально подходить там, где используются только эти медиа-запросы. CSS3-MediaQueries.js более развит и тяжелее, и предлагает поддержку более широкого множества более сложных медиа-запросов. Кроме того, имейте в виду, что любой костыль может иметь проблемы с производительностью и потенциально замедлить сайты. Убедитесь, что любой подобный костыль заслуживает снижения производительности.

Демонстрация медиа-запросов

Используя медиа-запросы мы сейчас перепишем гибкие макеты, которые построили ранее. Одна из текущих проблем в демонстрации появляется, когда ширина <aside> становится безуспешно маленькой на небольших экранах. Добавив медиа-запрос для области просмотра ниже 420 пикселей в ширину, мы можем изменить макет, отключив float и изменив ширину <section> и <aside>.

@media all and (max-width: 420px) {
  section, aside {
    float: none;
    width: auto;
  }
}

Рис. 4.02. Без каких-либо медиа-запросов <section> и <aside> становятся слишком узкими. Возможно, даже чересчур, чтобы содержать любой реальный контент.

Рис. 4.03. С помощью медиа-запросов мы убираем float и меняем ширину <section> и <aside>. Теперь они занимают всю ширину области просмотра, добавляя свободное пространство существующему содержимому.

Определение контрольных точек

Ваш инстинкт может подсказать писать контрольные точки в медиа-запросах основываясь на основных размерах области просмотра, как это определено разными разрешениями устройств, таких как 320px, 480px, 768px, 1024px, 1224px и т. д. Это плохая идея.

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

Кроме того, всё это время выходят новые устройства и разрешения. Попытка идти в ногу с этими изменениями это бесконечный процесс.

Сначала мобильные

Один из популярных методов использования медиа-запросов называется «сначала мобильные». Данный подход включает в себя использование стилей, ориентированных на более мелкие экраны как стили по умолчанию для сайта, а затем использование медиа-запросов, чтобы добавить стили по мере роста экрана.

Вера в мобильные заключается в том, что пользователь мобильного устройства обычно использует меньший экран и не должен загружать стили для настольного компьютера, которые перепишут мобильные стили позже. Это пустая трата трафика. Трафик это ценность для любых пользователей, которые ищут реактивный сайт.

Подход «сначала мобильные» также учитывает в дизайне ограничения мобильного пользователя. В недалеком будущем большинство интернет-соединений будет сделано на мобильных устройствах. План состоит в том, что для этого соответственно и развивать важный мобильный опыт.

Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.

/* Сперва стили по умолчанию, затем медиа-запросы */
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

Кроме того, загрузка ненужных ресурсов может быть остановлена с помощью медиа-запросов. Вообще говоря, удаление теней, градиентов, трансформации и анимации в мобильных стилях сама по себе неплохая идея. При их чрезмерном применении они вызывают тяжёлую нагрузку и даже могут сократить время работы батареи.

/* Стили по умолчанию */
body {
  background: #ddd;
}
/* Стили для больших устройств */
@media screen and (min-width: 800px) {
  body {
    background-image: url("bg.png") 50% 50% no-repeat;
  }
}

Демонстрация

Добавив медиа-запросы к нашему предыдущему примеру, мы перепишем несколько стилей, чтобы макет выглядел лучше на экранах меньше 420 пикселей в ширину. Переписывая этот код, мы вначале добавим мобильные стили по умолчанию, затем медиа-запросы для настройки экранов с шириной более 420 пикселей, следующим образом:

section,
  aside {
  margin: 1.858736059%;
}
@media all and (min-width: 420px) {
  .container {
    max-width: 538px;
  }
  section {
    float: left;
    width: 63.197026%;
  }
  aside {
    float: right;
    width: 29.3680297%;
  }
}

Сначала мобильные

Заметьте, здесь такое же количество кода, что и раньше. Единственным исключением является то, что мобильные устройства требуют только единственную запись CSS. Остальные стили отложены и загружаются только на больших экранах и сделано это без переписывания начальных стилей.

viewport

Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport.

Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.

Высота и ширина области просмотра

Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height, а для свойства width принимается ключевое слово device-width. С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.

Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width.

<meta name="viewport" content="width=device-width">

Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.

Масштабирование области просмотра

Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale, maximum-scale, initial-scale и user-scalable.

initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.

<meta name="viewport" content="initial-scale=2">

Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.

Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale. Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale. Оба значения также должны быть от 0 до 10.

<meta name="viewport" content="minimum-scale=0">

Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale. Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable. Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.

Выключение возможности масштабирования сайта является плохой идеей. Это вредит доступности и удобству, мешая людям с ограниченными возможностями просматривать сайт по желанию.

<meta name="viewport" content="user-scalable=yes">

Разрешение области просмотра

Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi. target-densitydpi принимает несколько значений, включая device-dpi, high-dpi, medium-dpi, low-dpi или конкретное число точек на дюйм.

Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.

<meta name="viewport" content="target-densitydpi=device-dpi">

Комбинация значений

Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content. Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale.

<meta name="viewport" content="width=device-width, initial-scale=1">

Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.

Правило @viewport

Поскольку метатег viewport вращается преимущественно вокруг установки стилей, которые определяют как должен отображаться сайт, то рекомендуем переместить его из HTML в правило @viewport в CSS. Это помогает сохранить стиль отдельно от содержания, обеспечивая более семантический подход.

В настоящее время в некоторых браузерах уже реализовано правило @viewport, однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.

@viewport {
  width: device-width;
  zoom: 1;
}

Гибкий медиа-контент

Последний, но не менее важный аспект отзывчивого веб-дизайна включает гибкий медиа-контент. Когда начинает меняться область просмотра, медиа-контент не всегда под это подстраивается. Изображения, видео и другой медиа-контент должен быть масштабируемым, меняя свой размер при изменении размера области просмотра.

Быстрый способ сделать медиа-контент масштабируемым — это использовать свойство max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой медиа-контент будут уменьшаться в соответствии с шириной контейнеров.

img, video, canvas {
  max-width: 100%;
}

Демонстрация гибких изображений

Встраивание гибкого медиа-контента

К сожалению, свойство max-width не очень хорошо работает для всех случаев медиа-контента, в частности, для <iframe> и встраиваемого медиа-контента. Когда дело доходит до внешних сайтов вроде YouTube, которые используют <iframe> для встраиваемого медиа-контента, это огромное разочарование. К счастью, есть решения.

Чтобы встраиваемый медиа-контент был полностью отзывчивым, элемент должен быть позиционирован абсолютно в родительском элементе. У родителя width должен быть 100%, чтобы он мог масштабироваться, основываясь на ширине области просмотра. Родительский элемент также должен иметь height равный 0, чтобы включить механизм hasLayout в Internet Explorer.

Затем добавляем padding снизу родительского элемента, значение которого устанавливается таким же, что и соотношение сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните формулу гибкого макета? Если у видео соотношение сторон 16:9, то 9 разделить на 16 будет .5625, таким образом требуется нижний padding равный 56.25%. padding снизу, а не сверху используется специально для предотвращения Internet Explorer 5.5 от поломки и лечения родительского элемента, как абсолютно позиционированного.

HTML

<figure>
  <iframe src="https://www.youtube.com/embed/4Fqg43ozz7A"></iframe>
</figure>

CSS

figure {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Демонстрация гибкого видео

Ресурсы и ссылки

Автор и редакторы

Автор: Шэй Хоу

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

10 самых полезных инструментов и библиотек для JavaScript-разработчиков

В последние годы JavaScript доказал, что к нему нужно относиться серьёзно, потому что он может предоставить намного больше, чем несколько дешёвых эффектов, таких как мигающий текст.

В этой статье собраны 10 самых интересных инструментов и скриптов для всех JavaScript-разработчиков.

MicroJS

microjs

Ищете полезный JS код? MicroJS — совершенно новый сайт, который предоставляет вам фрагменты JavaScript кода для всех основных задач: Ajax, Json, DOM, Объектно-Ориентированный JavaScript и т.д. Этот золотой сайт обязательно нужно держать в закладках!
Сайт: http://microjs.com/

Diva.js

divajs

Diva — это Javascript интерфейс для просмотра документов, разработанный для работы с электронными библиотеками. Он может показывать многостраничные документы, как непрерывные. Этот инструмент создан для работы с IIPImage server и будет очень полезен тем, кто работает над веб-сайтом библиотеки или книжного магазина. Здесь можно просмотреть демо, если вы хотите увидеть инструмент в действии.
Сайт: ddmal.music.mcgill.ca

Bookmarklet Generator

bookmarklet

Как можно догадаться, этот инструмент — генератор букмарклетов (eng. bookmarklet). Принцип его работы достаточно прост. Вставьте свой JavaScript код, нажмите кнопку и вы получите букмарклет, готовый к установке на панель инструментов вашего браузера.
Сайт: benalman.com

jQAPI

jqapi

Любой jQuery разработчик проводит большое количество времени в поисках различной документации. jQAPI — это англоязычный ресурс, который предоставляет документацию по jQuery наиболее удобным способом. Вы можете обращаться к этому сайту всякий раз, когда вам нужна какая-либо помощь в jQuery.
Сайт: jqapi.com

Heatmap.js

heatmap

JavaScript не перестаёт удивлять своими бесконечными возможностями. К примеру, heatmap.js позволяет вам генерировать теплокарты на элементах html5canvas на основе ваших данных. Просто и эффектно! Кроме того, вы можете прочитать статью на нашем сайте про то, как установить этот плагин.
Сайт: www.patrick-wied.at

Respond.js

respond

Вы читали статью про адаптивную разметку (eng.) с CSS3 media queries? Respond.js — это небольшой скрипт, позволяющий вам использовать CSS3 media queries в браузерах, которые ещё не поддерживают эту технологию (да, мы говорим про IE).
Сайт: github.com

Modernizr

modernizr

Modernizr — скрипт, позволяющий старым браузерам работать практически со всеми новыми технологиями, таким образом вы можете создавать современные приложения, которые будут работать на IE6 и 7. Вашим клиентам это точно понравиться.
Сайт: modernizr.com

YepNope

yepnope

Цель YepNope довольно проста: Он отвечает yep (да), или nope (нет). К примеру, вы спрашиваете YepNope, загружен ли Modernizr. Если да, указываете определённые действия, если нет — другие действия. Это очень просто и удобно во многих случаях.
Сайт: yepnopejs.com

Ligature.js

ligature

Ligature.js — это скрипт, создающий привлекательные лигатуры для любых видов текста. Его нужно иметь каждому любителю типографики!
Сайт code.google.com

FitText.js

fittext

FitText — очень интересный инструмент, который позволяет автоматически изменять размеры текста в зависимости от размеров его родительского элемента. Откройте сайт и измените размер окна браузера — текст будет масштабирован. Ещё один инструмент для создания современных сайтов и приложений! Кроме того, про этот плагин уже шла речь в подборке плагинов, улучшающих типографику сайта.
Сайт: fittextjs.com


Возможно, Вам будет интересно ↓↓↓

Методы для Изящно унижающих Media Queries

Медиа-запросы третьей опорой в реализации Итан Маркотт о

отзывчивым design.Без запросы средств массовой информации, жидкости макеты будет бороться, чтобы адаптироваться к массиву размера экрана на сотни устройств там.Жидкость макетов может оказаться тесными и читается на небольших мобильных устройств и слишком большой и коренастый на больших широкоформатных дисплеев.Медиа-запросы позволяют нам адаптировать типографии в size __ и 5 | resolution устройства пользователя, что делает его мощным инструментом для крафта идеальное чтение experience.

CSS3 запросы средств массовой информации, которые включают в себя браузере ширина variable, которые поддерживаются большинством современных веб-браузеров.Мобильные и настольные браузеры, которые не имеют поддержки представит подпаритета опыт для пользователей, если мы не подойти и принять меры.Я опишу некоторые из методов, которые разработчики могут следовать для решения этой problem.

Это Depends

Если вы ищете более честный, правдивый ответ на практически любой вопрос по веб-дизайну и юзабилити, вот оно: Это depends.

— Джереми Keith

Существует не один-размер-подходит-все исправить.Каждый проект имеет свой собственный фокус, требования и аудитории.В этой статье мы надеемся, помогут вам принять оптимальное решение для Вашего проекта, рассказав о преимуществах и недостатках каждого solution.

Мобильные First

Ваши выбрали осуществления запросов средств массовой информации будет иметь большое влияние на как вам решать это.Мобильная первого реагировать дизайн процесс создания мобильных макета, а затем постепенно изменяя макет, больше места на экране становится доступным.Это гарантирует, что только минимальные необходимые файлы будут загружены, и он держит мобильное решение легко.Мобильная первый имеет преимущество в обеспечении хорошей резервной для мобильных устройств, которые не поддерживают запросы средств массовой информации, таких как пожилые BlackBerry, Opera Mini и Windows Mobile устройств.Эти устройства просто увидеть самые основные макет, без дополнительных работ, необходимых разработчика.Идеально

Техника 1: У Nothing

Иногда ленивый подход является наилучшим подходом.Он держит свой свет кодов и обслуживании и снижает любые ненужные обработки на стороне клиента.Некоторые старые браузеры запустить Javascript, как собака, и старые мобильные телефоны бороться, чтобы запустить интенсивную Javascript.Собственности, не Webkit браузера в большинстве BlackBerrys может занять до восьмиseconds просто разобрать JQuery библиотеки.Если ваш проект имеет длинный хвост пользователей с маломощными мобильные устройства, то, возможно, мобильных первого подхода достаточно для you.

Слон в комнате Internet Explorer на рабочем столе.С мобильного первого решения, больших экранах будет отображаться содержимое в одну колонку, в результате болезненного опыта чтения для пользователя, мимо установленного максимального комфорта: от 50 до 75 characters. Может быть, стоит установкаmax-width Недвижимость в основной контейнер, а затем повысит, что max-width В средствах массовой информации query.

#container {
 _width: 460px; /* Take that, IE6! */
 max-width: 460px;
}

@media only screen and (width) { /* A quick and simple test for CSS3 media query support. */

#container {
  max-width: 1200px; /* Add the real maximum width here. */
 }

}
Ничего не делать, если …
  • Ваша основная аудитория использует современные смартфоны,
  • Вы обязаны обеспечить приемлемый опыт длинный хвост функции телефона пользователям,
  • Рабочий стол не является большой частью вашей веб-strategy.

Example:. JQuery Mobile (“Любое устройство, которое не поддерживает запросы средств массовой информации будет получать основную C-класса опыт”)

Техника 2: Условный стиль IE Sheets

Удивительно, но в работе над этой статьей, я обнаружил, что это самый популярный метод используется в отзывчивый веб-сайтов.Вместо того, чтобы polyfilling поддержка запросов средств массовой информации, вы просто вы просто загрузить дополнительные таблицы стилей только для интернет Explorer загрузить тот же стиль, что вы обслуживали до браузеры, которые понимают запросы средств массовой информации для Internet Explorer.Для мобильных первого подхода, то это обычно влечет за собой загрузку основных стилей, который устанавливает с несколькими колонками для больших экранов.Jeremy Keith документы этого approach подробно в своем блоге.Он также добавляет условие, что не загружать таблицы стилей для мобильной версии IE.Crafty.

Это простой и эффективный способ поддержки Internet Explorer на рабочем столе, и он поддерживает мобильные первый подход, поскольку он загружает светом и соответствующей линейной функцией макет для phones.

С другой стороны, этот метод потенциально может ухудшить ремонтопригодность, требуя, чтобы поддерживать стилей дубликатов content. Он также добавляет другой HTTP-запроса IE пользователям, которые следует избегать, если possible.

Я удивлен, что Jeremy Keith выступает за этой техникой.Человек, который объявил, что на сцене агента пользователя нюхают является “ икру Satan” используется решение, направленное прямо на одной browser. Имейте в виду, что это не работает с браузерами, которые не поддерживают CSS3 Media Queries.Но это может быть вполне приемлемым в ситуации, когда поддержка других браузеров наследие не required.

Использование условных комментариев IE … Если
  • Вы используете мобильный первый рабочий процесс;
  • Ваши запросы средств массовой информации достаточно просто включить в одну таблицу стилей;
  • Обои для рабочего Internet Explorerтребует мульти-колонки, за счет скорости;
  • Вы не должны поддерживать длинный хвост наследие рабочего стола browsers.

пример: Huffduffer, мобильные первый подход с дополнительной колонке для экрана шириной более 480 pixels.

Бонус пример: проектирование с Data по пять простых шагов.Я люблю эти guy …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Почему загружается мобильная версия сайта в IE8 на Bootstrap 3? — Хабр Q&A

Здравствуйте. Столкнулся с проблемой, что за место полной версии сайта подгружается мобильный вариант верстки в IE8. Пока установлено все на Денвере. Условия подгрузки respond.js и html5shiv.js прописаны, но скрипты не работают. Уже не знаю в какую сторону копать. Может у меня какие то проблемы с браузером, но условия не работают хотя файлы подгружены. Использую Bootstrap 3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
<link href="css/style.css" rel="stylesheet">
</head>
<body>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</body>
</html>

<b>Также выкладываю код файла html.tpl.php тк сайт одеваю на Drupal 7.  Здесь тоже такая проблема с IE8 и не знаю как прописать путь для скриптов в Drupal. Обычно подключаю скрипты в файле .info, но там нет условия...</b>

<?php

/**
 * @file
 * Custom theme implementation to display the basic html structure of a single
 * Drupal page.
 */

?>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php print $head ?>
    <title><?php print $head_title ?></title>
    <?php print $styles ?>
    <?php print $scripts ?>
    <?php print $head_bottom ?>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body<?php print $attributes ?>>
    <?php print $page_top ?>
    <?php print $page ?>
    <?php print $page_bottom ?>
  </body>
</html>

HTML, CSS и JavaScript в вебе (поймут даже чайники) — Офтоп на vc.ru

Вы время от времени задумываетесь, как работает программирование, но не делали ничего сложнее в Интернете, чем загрузка фотографии в Facebook? Тогда вы в нужном месте.

Для тех, кто никогда «кодил» раньше, концепция создания веб-сайта с нуля, макет, дизайн и иже с ними — могут показаться действительно пугающими. Вы представляете студентов Гарварда из фильма «Социальная сеть», сидя за своими компьютерами с гигантскими наушниками и набирающими код, и думаете: «Я никогда не смогу этого сделать».

Собственно, вы можете.

Любой может научиться программировать, точно так же, как любой может изучить новый язык. На самом деле, программирование вроде как говорит на иностранном языке — именно поэтому они называются языками программирования. Каждый из них имеет свои собственные правила и синтаксис, которые необходимо изучать шаг за шагом. Эти правила — способы сообщить компьютеру, что делать, точнее, они — способ сообщать вашим браузерам, что делать.

Цель этого поста – познакомить Вас с основами HTML, CSS и одного из самых распространенных языков программирования — JavaScript. Но прежде чем мы начнем, давайте дадим представление о том, какие языки программирования действительно существуют.

Что такое язык программирования?

Программировать или «кодить» — это как решать головоломку. Как изучать иностранный язык, например английский или французский. Мы используем эти языки, чтобы превращать мысли и идеи в действия и поведение. В программировании цель точно такая же — вы просто управляете разными видами поведения, а источник этого поведения не человек, а компьютер.

Язык программирования — это наш способ общения с программным обеспечением.

Программирование в веб-разработке

Сотруднику ставится задача «создать веб-страницу с таким-то заголовком, таким-то шрифтом, так

javascript — Modernizr с Respond.js

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

javascript — Настройка Respond.js CDN / X-домена

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

.

Что такое JavaScript

JavaScript — это язык программирования для Интернета.

JavaScript может обновлять и изменять HTML и CSS.

JavaScript может вычислять , манипулировать и проверять данные .

Краткое руководство по JavaScript

В этом руководстве мы кратко рассмотрим наиболее важные типы данных JavaScript.

Переменные JavaScript могут быть:

  • Номера
  • Струны
  • Объектов
  • Массивы
  • Функции

Переменные JavaScript

Переменные JavaScript — это контейнеры для хранения значений данных.

В этом примере x, y и z являются переменными:

Из приведенного выше примера можно ожидать:

  • x сохраняет значение 5
  • у сохраняет значение 6
  • z сохраняет значение 11

Номера JavaScript

JavaScript имеет только одного типа числа. Числа можно писать с десятичными знаками или без них.

Пример

var x = 3,14; // Число с десятичными знаками
var y = 3; // Число без десятичных знаков

Попробуй сам »

Все числа хранятся как числа с плавающей запятой двойной точности.

Максимальное количество десятичных знаков — 17, но с плавающей точкой — нет.
всегда 100% точность:

Пример

var x = 0,2 + 0,1; // x будет 0,30000000000000004

Попробуй сам »

Строки JavaScript

Строки сохранить текст . Строки пишутся внутри кавычек. Вы можете использовать одинарные или двойные кавычки :

Пример

var carname = «Volvo XC60»;
// Двойные кавычки
var carname = ‘Volvo XC60’; // Одинарные кавычки

Попробуй сам »

Длина строки находится во встроенном свойстве length :

Объекты JavaScript

Вы уже знаете, что переменные JavaScript
контейнеры для значений данных.

Этот код присваивает простое значение (фиат) для
переменная с именем car:

Объекты тоже переменные. Но объекты могут содержать много
ценности.

Этот код присваивает множество значений (Fiat, 500, белый)
переменная
названный автомобиль:

Массивы JavaScript

массивов JavaScript используются для хранения нескольких значений в одном
переменная.

Функции JavaScript

Функция JavaScript — это блок кода, предназначенный для выполнения
конкретная задача.

Функция JavaScript выполняется, когда
«что-то» вызывает это (называет это).

Пример

функция myFunction (p1, p2) {
вернуть p1 * p2;
// Функция возвращает произведение p1 и p2
}

Попробуй сам »

Что умеет JavaScript?

Этот раздел содержит несколько примеров того, что может делать JavaScript:

  • JavaScript может изменять содержимое HTML
  • JavaScript может изменять значения атрибутов HTML
  • JavaScript может изменять стили HTML (CSS)
  • JavaScript может скрывать элементы HTML
  • JavaScript может отображать элементы HTML

JavaScript может изменять содержимое HTML

Один из многих методов JavaScript HTML — getElementById () .

В этом примере используется метод «поиска» элемента HTML (с)
и изменяет содержимое элемента ( innerHTML ) на «Hello
JavaScript »:

Пример

document.getElementById («демонстрация»). innerHTML = «Привет, JavaScript»;

Попробуй сам »

JavaScript может изменять значения атрибутов HTML

В этом примере JavaScript изменяет значение атрибута src (source) тега :

JavaScript может изменять стили HTML (CSS)

Изменение стиля элемента HTML, это вариант изменения HTML
атрибут:

Пример

документ.getElementById («демонстрация»). style.fontSize = «35px»;
или
document.getElementById (‘demo’). style.fontSize = ’35px’;

Попробуй сам »

JavaScript может скрывать элементы HTML

Скрыть элементы HTML можно, изменив стиль отображения:

Пример

document.getElementById («демонстрация»). style.display = «none»;
или
document.getElementById (‘demo’). style.display = ‘none’;

Попробуй сам »

JavaScript может отображать элементы HTML

Отображение скрытых HTML-элементов также можно выполнить, изменив стиль отображения:

Пример

документ.getElementById («демонстрация»). style.display = «block»;
или
document.getElementById (‘demo’). Style.display =
‘блок’;

Попробуй сам »

Полное руководство по JavaScript

Это краткое описание JavaScript.

Чтобы получить полное руководство по JavaScript, перейдите в Учебное пособие W3Schools по JavaScript.

Полный справочник по JavaScript см. В Справочнике по JavaScript W3Schools.

.

javascript — сервер Node.js перестает отвечать

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

.