адаптивный сайт
а какая будет разница , если я изменю в коде класс на див ? что изменится ?
В твоем случае никакой разницы.
А вот других случаях, где задаются скриптами стили, там нужны дивы и их ID и каждый див должен иметь свое имя.
ну задумка у меня такая, чтобы в левом верхем углу стояло лого фирмы , и чтобы оно не изменялось при именении размера экрана,
А что будет с правой колонкой, её же не будет видно при 120px. Уже при 240px ничего не остаётся для неё. Наверное что-то без инфо - рисунок фон ..
Отзывчивый или responsive жизайн сайта
Если Вы уже привыкли делать сайты по другим технологиям,
то перестановка мышления и логики будет немного непривычна.
Но как перестроитесь, то будет всё относительно просто и понятно.
Там нужно знать ещё много чего помимо чисто HTML и CSS.
К примеру как пользоваться вспомогательными программами
Как вычитать ширину перестроения дизайна
или как заставить меню в мобильной версии появляться в виде иконки.
ну и прочие мелочи.
Вот к стати неплохой урок (правда только на немецком.)
http://www.lingulo.com/de/tutorials-de/css-tut...
Неплохое объяснение, хотя может кому будет и через-чур подробным.
Но для начинающего вроде не плохо.
Все элементы объясняются.
В итоги получится полноценный сайт.
Только потом его нужно будет на свой вкус подогнать.
делать разный дизайн под разные разрешения ?
Если Вы сделаете Отзывчивый дизайн, то этого
делать не надо будет.
Клас на Див поменять не получится. (это невозможно)"class" и "id" можно присвоить различным элементам, но не заменить их.
Это всего лишь набор свойств для элементов
Я не понял о чем речь.
<div class="wrapper"> <div class="header1">Kopf1</div> <div class="header2">Kopf2</div> <div class="menue"> Menü</div> <div class="nav"> SIDEBAR</div> <div class="content">Inhalt</div> <div class="footer">Footer</div> </div>
<div id ="wrapper">
<div id ="header1">Kopf1</div>
<div id ="header2">Kopf2</div>
<div id ="menue"> Menü</div>
<div id ="nav"> SIDEBAR</div>
<div id ="content">Inhalt</div>
<div id ="footer">Footer</div>
</div>
В первом случае это пустой звук при использвании программирования. Нельзя динамически изменять стили дивов, всё неопределенно.
ну а в правой я хотел сделать меняющиеся картинки ,а если они не будут видны при малом разрешении , то как тогда быть ?
делать разный дизайн под разные разрешения ?
Сделать два дизайна или даже две страницы.
Первая страница - адаптивный сайт, в котором левая колонка немного изменяется, всегда отчетливо видна для посетителей, правая изменяется посильнее, но всё равно картинки видны.
Вторая страница для мобильных устройств.
Автоматически переходить с одной страницы на другую.
Можно обойтись и одной страницей - иметь разные дивы и делать активными те или другие.
Я сразу скажу, что я такое не делал, меня даже это и не интересует, но чувствую, что сделать можно спокойно.
Но обязательно придётся использовать скрипты.
Я не понял о чем речь.
Это был ответ на вопрос TC
а какая будет разница , если я изменю в коде класс на див ? что изменится ?
То, что Вы как пример приводите, это присвоение ID а не замена класса на див (вопрос был поставлен именно так).
Да и вообще, присваивать абсолютно всем элементам ID нет ни смысла, ни необходимости.
Это необходимо только тогда, если определённый элемент должен быть индивидуально обработан.
К примеру, если речь идёт о программировании игры или App,
где действительно нужно создать связь с определёнными элементами.
Ну или если все подобные элементы в сайте должны иметь одинаковые свойства,
а один, особый, должен иметь что-то своё индивидуальное.
А при разработке обычного шаблона для обычного сайта,
всем элементам присваивать собственные id, это просто лишний балласт в коде.
Исполнению кода мешать не будет, но способствовать его росту.
Для всех элементов нужно будет писать всё индивидуально 
В первом случае это пустой звук при использвании программирования. Нельзя динамически изменять стили дивов, всё неопределенно.
Тут нужно определиться что мы хотим:
- id - встречаются только один раз (индивидуальное и неповторимое название)
- class - может повторяться на одной странице много раз
При необходимости можно даже классы и id комбинировать или вообще их не использовать.
Часто нужно бывает и несколько классов на один элемент цеплять.
Всё решает конкретная ситуация.
При желании можно через Ява-Скрипт и элементы без id тоже обработать динамически.
ну или в крайнем случае, если это действительно нужно, дать элементу индивидуальное имя.
Но как я понимаю, темой ветки было не это а создание сайта с отзывчивым дизайном .
Сделать два дизайна или даже две страницы.
Автоматически переходить с одной страницы на другую.
Можно обойтись и одной страницей - иметь разные дивы и делать активными те или другие.
Не в обиду, но все эти методы я бы одобрил и полностью перенял бы, но лет как минимум пять назад.
Это всё уже давно устарело и требует намного больше времени для разработки и поддержки.
Всё нужно делать в двух экземплярах.
Не сомневаюсь, что это будет работать, но есть способы более эффективные и продуктивные.
Сделать два дизайна или даже две страницы. Автоматически переходить с одной страницы на другую.
Можно обойтись и одной страницей - иметь разные дивы и делать активными те или другие.
- - - - -
Не сомневаюсь, что это будет работать, но есть способы более эффективные и продуктивные.
И я не сомневаюсь, что есть способы более эффективные и продуктивные.
Правда я с ними не знаком, посмотреть бы сайт изготовленный таким способом.
Я же говорил о разработке сайта ручками, полностью на скриптах, никакой жесткой логики.
Наверное я смог бы это сделать и быстро, но не было пока в этом необходимости.
ПС
Вчера приобрел смартфон, посмотрел как выглядит наш сайт, в частности мой дневник и тема в группе – это ужасно. Срочно закрываю всё.
Как я понимаю, наш сайт сейчас ориентируется на мобильные устройства и мое оформление постов в противоречии с этим.
Я широко использовал кодировку, что было возможно и разрешалось на старом редакторе.
Даже была возможность проигрывать звук, видео итд. Сейчас всё иначе с новым редактором.
Кстати я посмотрел и некоторые мои любительские работы в интернете – и там ничего хорошего.
Многое сейчас надо пересмотреть и может быть переделать
Даже здесь, если буду продолжать вести дневник и то надо в первую очередь смотреть как это выглядит на мобильных устройствах.
И я не сомневаюсь, что есть способы более эффективные и продуктивные.
Правда я с ними не знаком, посмотреть бы сайт изготовленный таким способом.
Сайтов таких полно.
К примеру стандарная тема в ВордПрессе, многие шаблоны для Джумлы
сделаны на HTML, CSS и Ява-Скрипте.
Мой сайт сделан тоже в основном на HTML и CSS, ну и очень мало Ява-Скрипта.
Правда эта версия сайта, что сейчас в сети, это промежуточная версия (вроде как прототип).
Я сейчас делаю другой шаблон, с немного большей динамикой и семантической разметкой,
но принцип перестроения блоков останется такой же.
Я же говорил о разработке сайта ручками, полностью на скриптах, никакой жесткой логики.
Мой сайт или другие шаблоны, тоже кто-то ручками делал 
.
Хотя мой сайт как ориентир брать не стоит.
Я не люблю когда всё моргает и двигается, поэтому держу это на минимуме.
Но есть сайты, где очень много ява-скрипта и других эффектов.
К примеру всё перестраивается от CSS, и в придачу используются эффекты ява-скрипта.
Вот к примеру агентство, я у них пару сайтов в прошлом и в этом году делал: say-consulting.de
Тоже HTML, CSS и Ява-Скрипт.
Я кое-что сделал:
Программа сразу узнает ширину экрана, видно как для разных мониторов она разная.
Для моего большого монитора 1990 px, для маленького где-то 1330 px.
Подключаю смартфон - показывает 960 px.
Можно ли сделать программе по измеренной величине в 960 px заключение, что подключен смартфон?
ПС
Меня интересует вариант:
Узнав, что подключено что-то с малым разрешением экрана переходить на другой дизайн.
Можно ли сделать программе по измеренной величине в 960 px заключение, что подключен смартфон?
Система узнаёт, но как это всё с техинческой части организовано, я не интересовался.
Через ява-скрипт это тоже можно вычитать, но для создания отзывчивого сайта это абсолютно не нужно.
В любом случае, если сдвигать или раздвигать бровзер сбоков,
сайт должен менятся в зависимости от ширины бровзера.
Какой именно прибор подключён, это роли не играет.
В сети так же есть множество вспомогательных инструментов.
Или сайтов, симулирующих различные мониторы.
Погуглите на тему "эмулятор смартфона"
Система узнаёт, но как это всё с техинческой части организовано, я не интересовался.
Через ява-скрипт это тоже можно вычитать, но для создания отзывчивого сайта это абсолютно не нужно.
В css есть:
@media (min-width: 768px) {
.xxx {...}
}
, с помощью которого можно настраивать стили под нужные размеры экрана, это вовсю используется для респонзивной/адаптивной вёрстки.
Так же под пхп сайты есть библиотека - Mobile_Detect, которая может помочь определить с какого устройства идёт просмотр сайта, и под него загрузить стили, или вообще другую вёрстку страницы, скажем специально под мобильники.
ПС. Не знаю как в вордпрес, но в джумла есть также класс для определения устройства, правдо простой, даёт лишь примерное определение, а Mobile_Detect даёт вплоть до модели смартфона или планшета, естественно если Mobile_Detect последней версии и там есть в массиве данное устройство.
В общем, если скомбинировать медиа в ксс и библиотеку Mobile_Detect, то не каких ява скриптов и не нужно будет, и шаблон будет очень гибким, даже настраиваемым под любые устройства персонально, к примеру специально под яблофоны можно делать настройки под ретину и т.д..
В любом случае, если сдвигать или раздвигать бровзер сбоков,
сайт должен менятся в зависимости от ширины бровзера.
Какой именно прибор подключён, это роли не играет.
В сети так же есть множество вспомогательных инструментов.
Или сайтов, симулирующих различные мониторы.
Погуглите на тему "эмулятор смартфона"
В браузерах, в лисе точно, а в хроме не помню, но кажысь тоже, есть в инструментарии браузера - Веб разработка - адаптивный дизайн, который позволяет проверить сайт на адаптивность в стандартных заданных размерах и в своих, и не нужно не каких сетевых сервисов и эмуляторов смартфонов.
В css есть: @media (min-width: 768px) {
.xxx {...}
}
Это да, но это идёт как настройка на тот случай, если ширина достигла 768px (как в примере)
А я имел в виду саму технику, каким образом ширина замеряется и передаётся бровзеру.
Но это в принципе не столько важно для веб-дизайна, как для разработчиков бровзеров.
В общем, если скомбинировать медиа в ксс и библиотеку Mobile_Detect
А это разве не делает сайт более тяжёлым в плане объёма кода?
Да и с точки зрения непривязанности к определённым моделям приборов,
помоему это тоже немного противоречит самому определению "recponsive design".
Это вроде как раньше было, с отдельной мобильной версией.
Сейчас на сколько я знаю, хотят полностью отказаться от этой техники.
И развивать технику дизайна, абсолютно непривязанного к модели прибора.
Хотя скорей всего в некоторых случаях бесспорно останется такая необходимость.
В браузерах, в лисе точно, а в хроме не помню, но кажысь тоже
Я пользуюсь для этих целей обычно Хромом, мне с ним удобнее делать с вот этим Window Resizer.
Для Firefox подобного я пока не встречал (но и особо не искал 
)
Хотя я охотнее работаю с лисой.
Это да, но это идёт как настройка на тот случай, если ширина достигла 768px (как в примере)
А я имел в виду саму технику, каким образом ширина замеряется и передаётся бровзеру.
Но это в принципе не столько важно для веб-дизайна, как для разработчиков бровзеров.
Ну, как браузер распознаёт, это уже без разницы, это технология браузера(свои ява скрипты), важно что все современные браузеры прекрасно работают с @media, а дальше ток задать нужные блоки медиа со своими размерами, и переопределить в них нужные стили.
А это разве не делает сайт более тяжёлым в плане объёма кода?
Да, даёт нагрузку само собой, но данная библиотека и нужна в том случае, если стандартного @media не хватает. В любом случае, из библиотеки можно взять только нужное, и сократить тем самым нагрузку.
Да и с точки зрения непривязанности к определённым моделям приборов,
помоему это тоже немного противоречит самому определению "recponsive design".
Это вроде как раньше было, с отдельной мобильной версией.
Сейчас на сколько я знаю, хотят полностью отказаться от этой техники.
И развивать технику дизайна, абсолютно непривязанного к модели прибора.
Хотя скорей всего в некоторых случаях бесспорно останется такая необходимость.
Ну так, оно и сейчас не имеет прямой привязки, Bootstrap фреймворку пофиг какой гаджет или монитор, там всё на @media завязано. Просто есть случаи, когда необходимо сделать спец дизайн, под какое то экзотическое устройство,
тогда нужны другие средства, типа той библиотеки. Я с яблофоном чисто для примера привёл, не люблю гнилое тыблоко, и просто время от времени хочется залепить спец диз в стиле конца 90-х, и к нему привязать яблофоны, или вообще всем яблофанатам отдавать страницу, где написать, чтобы покупали норм компы и прочее. Это из за их сафарского браузера, которого больше под винду нет, а значить и норм не подогнать диз под него. :D
Для Firefox подобного я пока не встречал (но и особо не искал
Для лисы есть несколько плагинов, я раньше их использовал, но теперь хватает родного - "Веб разработка -> Адаптивный дизайн", и сторонний плагин - "User Agent Switcher".
Ну, как браузер распознаёт, это уже без разницы, это технология браузера(свои ява скрипты),
важно что все современные браузеры прекрасно работают с @media, а дальше ток задать нужные блоки медиа со своими размерами, и переопределить в них нужные стили.
А что делать не с современными браузерами?
Выход - это ява скрипты.
Но я не с этим.
Согласен, что медиазапросы хорошая вещь. И используя их можно многое сделать. Но всё-таки это не совсем адаптивный сайт получится, проглядывает дискретность:
@media screen and (max-width: 768px) {
…
}
@media screen and (max-width: 520px) {
…
}
@media screen and (min-width: 1200px) {
…
}
Кроме того, нет динамики, интерактивного режима. Так что я пришел к мысли попробовать вариант обойтись практически без CSS, тем более без медиазапросов - мне кажется это такая тоска.
Вариант - это ява скрипты. Легко проверить с чем работает программа. Потом можно задавать динамически стили и очень гибко.
Но я столкнулся уже с одной проблемой. Программе нужно постоянно отслеживать находится смартфон в горизонтальном или в вертикальном положении.
Пришлось поставить таймер, но он и для другой цели пригодится.
Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты, хотя я точно не знаю какие это браузеры, может и не стоит обращать внимания.