/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 @media (max-width: 960px) {
    .hideme { display: none; }
}

Browserhacks

5 замечательных изобретений от David DeSandro (Twitter, H5BP)

Эпиграф: а ведь я говорил!

Валентин экспериментирует с дизайном. Основная идея опытов – чтобы незарегистрированные посетители видели дневники в стандартном оформлении. А зарегистрированным нужно просто включить «глазик» (или глаза) и выбрать в верхней панели «Авторский», например.

Зачем скрывать от случайных посетителей авторское оформление? Потому что некоторые девочки взяли мамину помаду и «нарисовали» себе такие лица, что случайный посетитель в ужасе закроет страницу и сбежит. А, типа, если оформление будет нейтральное, то человек будет спокойно читать пост, не корчась в конвульсиях от «ах, какой красивый мигающий и блестящий фон у меня!»

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

В двух слова: если взять законы, то главная конституция. Потом закон, потом разные постановления, инструкции и так далее. То есть, если в законе написано одно, а в Конституции другое, то правильно – как в конституции. В жизни, конечно, по-другому. Если начальник написал, что ты должен работать, как папа Карло, то конституция не поможет.

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

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

А можно еще добавить внутренний стиль вообще для слова или буквы в тексте. Тогда буква будет и не черного и не голубого цвета, а белого, например.

В дневниках, это выглядит примерно так: есть общий стиль, который создали программисты, есть стили дневника, которые накреативил его владелец. Но владельцу и этого мало, поэтому он в посте выделяет часть текста и делает его… особенным. Меньше размером букв, другим цветом и так далее.

Теперь представим, что у вас указан черный фон дневника, а шрифт красный. С трудом, но прочитать текст можно. Если кто-то зайдет на сайт, то в стандартном оформлении увидит черные буквы на светлом фоне.

Если нам захотелось выделить в посте часть текста и сделать его белым, то он будет виден на черном фоне тоже. Но в стандартном оформлении что получится? Хрень какая-то… А всё потому, что фон прописан в глобальных стилях дневника, а шрифт – только для поста.

Как такое прочитать… Можно выделить мышкой и прочитать. Как такое исправить. Вот здесь и проблема. Сразу поменять весь креатив почти невозможно. Открывать нужно пост и возвращать тексту его первоначальный вид. Еще проще и кардинальнее – при редактировании поста выделить его весь и нажать кнопку «Удалить форматирование».

• Простая и быстрая интеграция в любой готовый проект, с минимальными изменениями последнего
• Минимальный размер кода и количество файлов
• Универсальность и независимость от технологий и фреймворков — чтобы работал на любом хостинге, даже самом ограниченном