а какая будет разница , если я изменю в коде класс на див ? что изменится ?

В твоем случае никакой разницы.

А вот других случаях, где задаются скриптами стили, там нужны дивы и их ID и каждый див должен иметь свое имя.

ну задумка у меня такая, чтобы в левом верхем углу стояло лого фирмы , и чтобы оно не изменялось при именении размера экрана,

А что будет с правой колонкой, её же не будет видно при 120px. Уже при 240px ничего не остаётся для неё. Наверное что-то без инфо - рисунок фон ..

ну а в правой я хотел сделать меняющиеся картинки ,

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

делать разный дизайн под разные разрешения ?

а какая будет разница , если я изменю в коде класс на див

Клас на Див поменять не получится. (это невозможно)

"class" и "id" можно присвоить различным элементам, но не заменить их.

Это всего лишь набор свойств для элементов

Отзывчивый или 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 и Ява-Скрипт.

НП

Как узнать программе, что подключен смартфон?

В смысле откуда сайт на 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, тем более без медиазапросов - мне кажется это такая тоска.

Вариант - это ява скрипты. Легко проверить с чем работает программа. Потом можно задавать динамически стили и очень гибко.

Но я столкнулся уже с одной проблемой. Программе нужно постоянно отслеживать находится смартфон в горизонтальном или в вертикальном положении.

Пришлось поставить таймер, но он и для другой цели пригодится.

Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты, хотя я точно не знаю какие это браузеры, может и не стоит обращать внимания.