alleclf

А "e005" это порядковый номер. Отображается эта иконка как вектор? При изменении размера не будет "плыть"?

Что означает выражение content: "\e005";Применяется к span'у. Нашел на сайте _designmodo.com, это иконка меню, видна если сузить окно браузера.

спасибо, понятно

Есть два блока, один фиксированного размера, второй должен растянуться по ширине до конца страницы. То есть, 2 блока должны растянуться на всю ширину странички. Вот пример - http://jsfiddle.net/9k5xwnvp/

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

нет, не надо, мне проще немного шаблон переделать чем из-за этой ерунды скрипты подключать

я думал это как-то проще делается

Разбираюсь с адаптивным дизайном. Использую вот такую конструкцию: <meta name="viewport" content="width=device-width, initial-scale=1.0">Стили подключаю вот так: <link rel="stylesheet" media="all and (min-device-width:320px)" href="{THEME}/css/style_480.css" />Тестирую на смартфоне с экраном 480х854. При такой конструкции ширина экран определяется в 320 пх. и весь шаблон вроде как растягивается. Если в медиазапросе указать значение больше 320 пх, стили вообще не подгружаются. Если не использовать "viewport" шаблон сильно сжимается, вроде как масштаб уменьшается, причем уменьшаются всё кроме текста - текст отображается нормального размера. Искажения очень хорошо видно на картинках. Для шаблона использую картинки 64х64 пх. Так вот, БЕЗ использования "viewport" они маленькие - пальцем невозможно попасть. А С использованием "viewport" - картинки наоборот сильно большие, буквально в треть экрана. Скажите пожалуйста, что я не так делаю, в чём проблема кривого отображения на смарте. Кстати, на компе всё выглядит как положено. На смарте использовал google chrome, есть еще opera mobile, но она и должна всё перекручивать - опера не показатель. На скринах: - первый с использованием "viewport" - всё сильно увеличено - на втором без использования "viewport" - всё отлично кроме картинок хорошо видно по картинке "меню" (вверху в виде 3х линий). Сама картинка 64х64 пх. Получается что при использовании "viewport" неправильно определяется разрешение экрана. В идеале всё должно быть как на втором скрине при условии что картинка приобретет свой нормальный размер.

Как можно сделать что бы при получении фокуса textarea подсвечивался родительский div. То есть, необходимо чтобы textarea никак не реагировала, а реагировал родительский блок. Вот пример - http://jsfiddle.net/0o279vv1/

нет, ширина картинки неизвестна - они на странички разные, от 1200 до 2500 пх надо как-то оригинальный размер определить

Необходимо чтобы картинки растягивались на всю ширину экрана, но не больше своего оригинального размера. На страничке могут быть картинки разного размера. Например, если ширина картинки 2500 пх, то она растягивается на весь экран (на 1920 пх). Если ширина картинки 1600 пх, то она растягивается только до значения 1600 пх - на часть экрана. То есть, как заставить картинку НЕ растягиваться больше своего оригинального размера. Вот пример, точнее заготовка - http://jsfiddle.net/qq4gm9tr/

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

Как можно сделать что бы внутренний блок растягивался на всю высоту родительского блока, height=100% не работает. Вот пример - http://jsfiddle.net/prd5qrh2/ почему-то желтый блок не растягивается на всю высоту

спасибо

Блок со 100% шириной и отступом вылазит за пределы экрана. Как можно сделать что бы он помещался? Вот пример - http://jsfiddle.net/333vwb3k/

Сейчас использую конструкцию в виде: <link href="/css/style_480.css" rel="stylesheet" media="only screen and (max-width:480px)"><link href="/css/style_800.css" rel="stylesheet" media="only screen and (max-width:800px)"><link href="/css/style_1200.css" rel="stylesheet" media="only screen and (max-width:1200px)">Я не совсем понимаю как работают эти функции, ведь если экран с разрешением, например 320 пх, так он же подходит под все описания и получится что загрузятся все 3 стиля. Как можно сделать конструкцию "ОТ и ДО" и для любых устройств? То есть, для разрешения экрана: - от 240 до 480 - грузить стиль 1 - от 480 до 800 - грузить стиль 2 - от 800 до 1200 - грузить стиль 3 - и т.д. Пробовал написать вот так, но что-то не работает: <link href="/css/style_480.css" rel="stylesheet" media="all and (min-width:240px) and (max-width:480px)">

а если после загрузки странички пользователь, например, изменит размер окна браузера, скрипт корректно это обработает?

Как в php коде можно сделать определение разрешения экрана? В php файле идет подсчет длинны блока. Выглядит это примерно так: $rating = $rating * 48;48 - это множитель размера стандартного блока, его надо как-то менять. То есть, это число должно меняться с размером экрана, от 16 до 128.

Да я ещё на стадии планирования, ситуация позволяет. Я тоже больше склоняюсь к разным картинкам, и по трафику меньше будет тянуться.

Как правильно поступить с картинками в адаптивном дизайне. В зависимости от разрешения экрана картинки тоже должны меняться. Кстати, в данной теме под картинками имею ввиду кнопки - добавить в закладки, рейтинг, кнопки соц.сетей и т.д., то есть то на что можно нажать. Так вот, вижу 2 варианта: - менять размер картинок - размещаю картинку максимального размера (128х128), и если надо просто сжимаю - менять сами картинки, то есть в шаблон подгружаются разные картинки, от 16х16 до 128х128 Какой вариант лучше?

У меня на страничке есть ещё кнопки, они не будут конфликтовать?

Можно ли сделать кнопку или ссылку чтобы при клике выделялись все элементы в списке? Вот заготовка - http://jsfiddle.net/4xugpz6d/

ну, в принципе, да а чем-то ещё можно пользоваться кроме "span", у меня их и так хватает, придется много перебирать

это "display:none" или "block" ? Так получится что одно и тоже надо несколько раз прописать, просто показывать или скрывать. Может на php можно что-то придумать?

Для стилей использую конструкцию вида - <link href="/css/style_480.css" rel="stylesheet" media="only screen and (max-width:480px)">Интересует, как можно в самом коде html делать подобные решения. Например, если экран устройства больше 480 пикселей вывести <div>вход на сайт</div>а если меньше <div>вход</div>То есть, как менять не только стили, но и элементы странички.