Задать вопрос

Илья Матвийчук

Верстальщик, программист, дизайнер
Ответы пользователя по тегу CSS

  • Правильно ли использовать селектор * для -webkit-tap-highlight-color?

    @iliya2004
    Верстальщик, программист, дизайнер
    Да, можно
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать параллакс эффект прокрутки на CSS?

    @iliya2004 Автор вопроса
    Верстальщик, программист, дизайнер 
    body, html {
    margin: 0;
    height: 100%;
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
}

parallax {
     transform: translateZ(-1px)
}
    Ответ написан
    Комментировать
    Комментировать

  • Как заставить команды работать только при просмотре сайта с мобильных устройств?

    @iliya2004
    Верстальщик, программист, дизайнер
    Кусок статьи с хабра:

    Теперь о методе, которым пользуюсь я. Заключается он в использовании html-флагов для каждого диапазона. В качестве флага может выступать реальная конструкция верстки, появляющаяся только в нужном нам диапазоне размеров, либо пустой однопиксельный div.
    Html:
    <body>
		<div class=”max_width_800”></div>
		<div class=”max_width_479”></div>
	</body>

    CSS:
    .max_width_800{
	display: none;
}
.max_width_479{
	display: none;
}

@media screen and (max-width: 800px) {
	.max_width_800{
		display: block;
	}
	.max_width_479{
		display: none;
	}
}

@media screen and (max-width: 479px) {
	.max_width_800{
		display: none;
	}
	.max_width_479{
		display: block;
	}
}

    А в самом скрипте мы просто проверяем показан ли наш маркер:
    if ($('.max_width_800').is(':visible')) {
    // код jQuery
}

if ($('.max_width_479').is(':visible')) {
    // код jQuery
}
    Ответ написан
    3 комментария
    3 комментария

  • Почему не работает media запрос?

    @iliya2004
    Верстальщик, программист, дизайнер
    Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

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


    Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

    Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

    Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

    width=device-widthinitial-scale=1

    Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

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

    статья
    Ответ написан
    3 комментария
    3 комментария