Трюки с сайтом на HTML и CSS

Трюки с сайтом на HTML и CSS

30.03.201434775

На этой странице небольшая подборка приемов, которые используют верстальщики. Это хитрости в HTML и CSS. Материал будет полезен новичкам. Здесь имеется информация о том, как сделать резиновый шаблон на CSS, как запретить масштабирование в браузере и как сделать шаблон сайта кроссбраузерным, как сделать отдельную таблицу стилей для IE.

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

Здесь мы рассмотрим атрибут content тега meta. Он запретит масштабирование страницы мобильной версии сайта. Для этого в секцию head вставьте:

Код
<meta name="viewport" content="user-scable=no">

Атрибут name со значением viewport определяет, что этот запрет действует только в мобильных браузерах.

«Резиновое» строение шаблона

Для "резинового" строения необходимо изменить измерения в CSS с пикселов (px) на проценты (%). При этом, он будет отображаться независимо от ориентации смартфона (книжной или альбомной). Рассмотрим пример:

Код
@media screen and (max-width: 768px) { #footer { width:100%; } }

Он позволяет установить элемент с id равным footer для ширины области просмотра 768 пикселов параметр 100%. То есть, он будет отображаться во весь экран независимо от того, скольким пикселам (в данном примере, ориентировано на iPhone) равна ширина просмотра. Это правило не действует для ширины, например 782 пикселов с помощью правила max-width: 768px. Таким образом, min-width: 768px запрещает свойство для ширины <768. На месте width может стоять height, он задаст параметры для максимальной и минимальной высоты области просмотра.

Кроссбраузерность

Кроссбраузерность в наше время очень важна в рекламных целях, ведь добрая четверть пользователей все еще пользуется Internet Explorer'oм, наладившим дела с JavaScript (версия > или =9), но не поддерживающим простой тег comment (вер. >9 и >4). Для добавления стилей для IE, добавьте в head вашего сайта простую строчку:

Код
<!--[if it IE 7]><link rel="stylesheet" href="ссылка на CSS для IE <7"><![endif]-->

Это условие будет принято только для версии IE >7 благодаря оператору it. Если вы хотите, чтобы было больше 7 или равна 7, замените его на gte. Он укажет, что свойство действительно для IE > или =7.

На этом пока что все. Ну, а если Вы хотите больше, ставьте + в комментариях. Я знаю, что все это легко, но новичкам будет полезно. Спасибо за внимание.




Сохраните в социальную сеть
Комментарии (5)
Оригинально!
0
Михаил 15.04.2014 в 15:08Спам
Спасибо :)
0
Супер, спасибо, полезная вещица
1
Михаил 26.04.2014 в 13:50
Спасибо
0
Dmitry 27.04.2014 в 23:59Спам
Интересно!
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт