русский
Germany.ruForen → Архив Досок→ Webdesign und Hosting

адаптивный сайт

1218  1 2 3 alle
regrem патриот18.09.16 22:55
NEW 18.09.16 22:55 
in Antwort Brandus 18.09.16 22:08, Zuletzt geändert 18.09.16 23:15 (regrem)
а какая будет разница , если я изменю в коде класс на див ? что изменится ?

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

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


#21 
regrem патриот18.09.16 23:22
NEW 18.09.16 23:22 
in Antwort Brandus 18.09.16 22:04, Zuletzt geändert 18.09.16 23:36 (regrem)
ну задумка у меня такая, чтобы в левом верхем углу стояло лого фирмы , и чтобы оно не изменялось при именении размера экрана,

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

#22 
Brandus знакомое лицо19.09.16 01:45
Brandus
NEW 19.09.16 01:45 
in Antwort regrem 18.09.16 23:22

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

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

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

#23 
Vovan(ator) коренной житель19.09.16 05:52
Vovan(ator)
NEW 19.09.16 05:52 
in Antwort Brandus 18.09.16 22:08
а какая будет разница , если я изменю в коде класс на див

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

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

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


#24 
Vovan(ator) коренной житель19.09.16 06:16
Vovan(ator)
NEW 19.09.16 06:16 
in Antwort Brandus 18.09.16 22:17
Отзывчивый или responsive жизайн сайта

Если Вы уже привыкли делать сайты по другим технологиям,

то перестановка мышления и логики будет немного непривычна.

Но как перестроитесь, то будет всё относительно просто и понятно.


Там нужно знать ещё много чего помимо чисто HTML и CSS.

К примеру как пользоваться вспомогательными программами

Как вычитать ширину перестроения дизайна

или как заставить меню в мобильной версии появляться в виде иконки.

ну и прочие мелочи.


Вот к стати неплохой урок (правда только на немецком.)

http://www.lingulo.com/de/tutorials-de/css-tut...

Неплохое объяснение, хотя может кому будет и через-чур подробным.

Но для начинающего вроде не плохо.

Все элементы объясняются.

В итоги получится полноценный сайт.

Только потом его нужно будет на свой вкус подогнать.


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

Если Вы сделаете Отзывчивый дизайн, то этого делать не надо будет.

#25 
regrem патриот19.09.16 08:24
NEW 19.09.16 08:24 
in Antwort Vovan(ator) 19.09.16 05:52, Zuletzt geändert 19.09.16 08:39 (regrem)
Клас на Див поменять не получится. (это невозможно)"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>


В первом случае это пустой звук при использвании программирования. Нельзя динамически изменять стили дивов, всё неопределенно.

#26 
regrem патриот19.09.16 08:50
NEW 19.09.16 08:50 
in Antwort Brandus 19.09.16 01:45, Zuletzt geändert 19.09.16 08:55 (regrem)
ну а в правой я хотел сделать меняющиеся картинки ,а если они не будут видны при малом разрешении , то как тогда быть ?
делать разный дизайн под разные разрешения ?

Сделать два дизайна или даже две страницы.

Первая страница - адаптивный сайт, в котором левая колонка немного изменяется, всегда отчетливо видна для посетителей, правая изменяется посильнее, но всё равно картинки видны.

Вторая страница для мобильных устройств.

Автоматически переходить с одной страницы на другую.

Можно обойтись и одной страницей - иметь разные дивы и делать активными те или другие.


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

Но обязательно придётся использовать скрипты.


#27 
Vovan(ator) коренной житель19.09.16 09:40
Vovan(ator)
NEW 19.09.16 09:40 
in Antwort regrem 19.09.16 08:24
Я не понял о чем речь.

Это был ответ на вопрос TC


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

То, что Вы как пример приводите, это присвоение ID а не замена класса на див (вопрос был поставлен именно так).


Да и вообще, присваивать абсолютно всем элементам ID нет ни смысла, ни необходимости.

Это необходимо только тогда, если определённый элемент должен быть индивидуально обработан.

К примеру, если речь идёт о программировании игры или App,

где действительно нужно создать связь с определёнными элементами.

Ну или если все подобные элементы в сайте должны иметь одинаковые свойства,

а один, особый, должен иметь что-то своё индивидуальное.


А при разработке обычного шаблона для обычного сайта,

всем элементам присваивать собственные id, это просто лишний балласт в коде.

Исполнению кода мешать не будет, но способствовать его росту.

Для всех элементов нужно будет писать всё индивидуально миг


В первом случае это пустой звук при использвании программирования. Нельзя динамически изменять стили дивов, всё неопределенно.

Тут нужно определиться что мы хотим:

- id - встречаются только один раз (индивидуальное и неповторимое название)

- class - может повторяться на одной странице много раз

При необходимости можно даже классы и id комбинировать или вообще их не использовать.

Часто нужно бывает и несколько классов на один элемент цеплять.

Всё решает конкретная ситуация.


При желании можно через Ява-Скрипт и элементы без id тоже обработать динамически.

ну или в крайнем случае, если это действительно нужно, дать элементу индивидуальное имя.

Но как я понимаю, темой ветки было не это а создание сайта с отзывчивым дизайном миг.

#28 
Vovan(ator) коренной житель19.09.16 09:49
Vovan(ator)
19.09.16 09:49 
in Antwort regrem 19.09.16 08:50
Сделать два дизайна или даже две страницы.
Автоматически переходить с одной страницы на другую.
Можно обойтись и одной страницей - иметь разные дивы и делать активными те или другие.

Не в обиду, но все эти методы я бы одобрил и полностью перенял бы, но лет как минимум пять назад.

Это всё уже давно устарело и требует намного больше времени для разработки и поддержки.

Всё нужно делать в двух экземплярах.


Не сомневаюсь, что это будет работать, но есть способы более эффективные и продуктивные.

#29 
Brandus знакомое лицо19.09.16 19:38
Brandus
NEW 19.09.16 19:38 
in Antwort Vovan(ator) 19.09.16 06:16

ок, я посмотрю ссылку , ну то , что на немецком , это не страшно :) лишь бы, не на китайском

#30 
regrem патриот23.09.16 10:51
NEW 23.09.16 10:51 
in Antwort Vovan(ator) 19.09.16 09:49, Zuletzt geändert 23.09.16 10:53 (regrem)
Сделать два дизайна или даже две страницы. Автоматически переходить с одной страницы на другую.
Можно обойтись и одной страницей - иметь разные дивы и делать активными те или другие.
- - - - -
Не сомневаюсь, что это будет работать, но есть способы более эффективные и продуктивные.

И я не сомневаюсь, что есть способы более эффективные и продуктивные.

Правда я с ними не знаком, посмотреть бы сайт изготовленный таким способом.

Я же говорил о разработке сайта ручками, полностью на скриптах, никакой жесткой логики.

Наверное я смог бы это сделать и быстро, но не было пока в этом необходимости.


ПС

Вчера приобрел смартфон, посмотрел как выглядит наш сайт, в частности мой дневник и тема в группе – это ужасно. Срочно закрываю всё.

Как я понимаю, наш сайт сейчас ориентируется на мобильные устройства и мое оформление постов в противоречии с этим.

Я широко использовал кодировку, что было возможно и разрешалось на старом редакторе.

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

Кстати я посмотрел и некоторые мои любительские работы в интернете – и там ничего хорошего.

Многое сейчас надо пересмотреть и может быть переделать

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

#31 
Vovan(ator) коренной житель23.09.16 18:21
Vovan(ator)
NEW 23.09.16 18:21 
in Antwort regrem 23.09.16 10:51
И я не сомневаюсь, что есть способы более эффективные и продуктивные.
Правда я с ними не знаком, посмотреть бы сайт изготовленный таким способом.

Сайтов таких полно.

К примеру стандарная тема в ВордПрессе, многие шаблоны для Джумлы

сделаны на HTML, CSS и Ява-Скрипте.


Мой сайт сделан тоже в основном на HTML и CSS, ну и очень мало Ява-Скрипта.

Правда эта версия сайта, что сейчас в сети, это промежуточная версия (вроде как прототип).

Я сейчас делаю другой шаблон, с немного большей динамикой и семантической разметкой,

но принцип перестроения блоков останется такой же.


Я же говорил о разработке сайта ручками, полностью на скриптах, никакой жесткой логики.

Мой сайт или другие шаблоны, тоже кто-то ручками делал улыб.


Хотя мой сайт как ориентир брать не стоит.

Я не люблю когда всё моргает и двигается, поэтому держу это на минимуме.


Но есть сайты, где очень много ява-скрипта и других эффектов.

К примеру всё перестраивается от CSS, и в придачу используются эффекты ява-скрипта.

Вот к примеру агентство, я у них пару сайтов в прошлом и в этом году делал: say-consulting.de

Тоже HTML, CSS и Ява-Скрипт.



#32 
regrem патриот24.09.16 19:46
NEW 24.09.16 19:46 
in Antwort Vovan(ator) 23.09.16 18:21

НП

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


#33 
Vovan(ator) коренной житель24.09.16 19:48
Vovan(ator)
NEW 24.09.16 19:48 
in Antwort regrem 24.09.16 19:46

В смысле откуда сайт на HTML и CSS узнаёт что сайт со смартфона посетили?

#34 
regrem патриот24.09.16 20:17
NEW 24.09.16 20:17 
in Antwort Vovan(ator) 24.09.16 19:48, Zuletzt geändert 24.09.16 20:30 (regrem)

Я кое-что сделал:

Программа сразу узнает ширину экрана, видно как для разных мониторов она разная.

Для моего большого монитора 1990 px, для маленького где-то 1330 px.

Подключаю смартфон - показывает 960 px.

Можно ли сделать программе по измеренной величине в 960 px заключение, что подключен смартфон?


ПС

Меня интересует вариант:

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


#35 
Vovan(ator) коренной житель24.09.16 20:42
Vovan(ator)
NEW 24.09.16 20:42 
in Antwort regrem 24.09.16 20:17
Можно ли сделать программе по измеренной величине в 960 px заключение, что подключен смартфон?

Система узнаёт, но как это всё с техинческой части организовано, я не интересовался.

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


В любом случае, если сдвигать или раздвигать бровзер сбоков,

сайт должен менятся в зависимости от ширины бровзера.

Какой именно прибор подключён, это роли не играет.


В сети так же есть множество вспомогательных инструментов.

Или сайтов, симулирующих различные мониторы.

Погуглите на тему "эмулятор смартфона"


#36 
Sergo2008 старожил25.09.16 08:41
Sergo2008
NEW 25.09.16 08:41 
in Antwort Vovan(ator) 24.09.16 20:42
Система узнаёт, но как это всё с техинческой части организовано, я не интересовался.
Через ява-скрипт это тоже можно вычитать, но для создания отзывчивого сайта это абсолютно не нужно.

В css есть:

@media (min-width: 768px) {
.xxx {...}
}

, с помощью которого можно настраивать стили под нужные размеры экрана, это вовсю используется для респонзивной/адаптивной вёрстки.


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

ПС. Не знаю как в вордпрес, но в джумла есть также класс для определения устройства, правдо простой, даёт лишь примерное определение, а Mobile_Detect даёт вплоть до модели смартфона или планшета, естественно если Mobile_Detect последней версии и там есть в массиве данное устройство.


В общем, если скомбинировать медиа в ксс и библиотеку Mobile_Detect, то не каких ява скриптов и не нужно будет, и шаблон будет очень гибким, даже настраиваемым под любые устройства персонально, к примеру специально под яблофоны можно делать настройки под ретину и т.д..


В любом случае, если сдвигать или раздвигать бровзер сбоков,
сайт должен менятся в зависимости от ширины бровзера.
Какой именно прибор подключён, это роли не играет.
В сети так же есть множество вспомогательных инструментов.
Или сайтов, симулирующих различные мониторы.
Погуглите на тему "эмулятор смартфона"

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

#37 
Vovan(ator) коренной житель25.09.16 10:26
Vovan(ator)
NEW 25.09.16 10:26 
in Antwort Sergo2008 25.09.16 08:41
В css есть: @media (min-width: 768px) {
.xxx {...}
}

Это да, но это идёт как настройка на тот случай, если ширина достигла 768px (как в примере)

А я имел в виду саму технику, каким образом ширина замеряется и передаётся бровзеру.

Но это в принципе не столько важно для веб-дизайна, как для разработчиков бровзеров.


В общем, если скомбинировать медиа в ксс и библиотеку Mobile_Detect

А это разве не делает сайт более тяжёлым в плане объёма кода?

Да и с точки зрения непривязанности к определённым моделям приборов,

помоему это тоже немного противоречит самому определению "recponsive design".

Это вроде как раньше было, с отдельной мобильной версией.

Сейчас на сколько я знаю, хотят полностью отказаться от этой техники.

И развивать технику дизайна, абсолютно непривязанного к модели прибора.

Хотя скорей всего в некоторых случаях бесспорно останется такая необходимость.


В браузерах, в лисе точно, а в хроме не помню, но кажысь тоже

Я пользуюсь для этих целей обычно Хромом, мне с ним удобнее делать с вот этим Window Resizer.

Для Firefox подобного я пока не встречал (но и особо не искал смущ)

Хотя я охотнее работаю с лисой.

#38 
Sergo2008 старожил25.09.16 19:48
Sergo2008
NEW 25.09.16 19:48 
in Antwort Vovan(ator) 25.09.16 10:26
Это да, но это идёт как настройка на тот случай, если ширина достигла 768px (как в примере)
А я имел в виду саму технику, каким образом ширина замеряется и передаётся бровзеру.
Но это в принципе не столько важно для веб-дизайна, как для разработчиков бровзеров.

Ну, как браузер распознаёт, это уже без разницы, это технология браузера(свои ява скрипты), важно что все современные браузеры прекрасно работают с @media, а дальше ток задать нужные блоки медиа со своими размерами, и переопределить в них нужные стили.

А это разве не делает сайт более тяжёлым в плане объёма кода?

Да, даёт нагрузку само собой, но данная библиотека и нужна в том случае, если стандартного @media не хватает. В любом случае, из библиотеки можно взять только нужное, и сократить тем самым нагрузку.

Да и с точки зрения непривязанности к определённым моделям приборов,

помоему это тоже немного противоречит самому определению "recponsive design".

Это вроде как раньше было, с отдельной мобильной версией.

Сейчас на сколько я знаю, хотят полностью отказаться от этой техники.

И развивать технику дизайна, абсолютно непривязанного к модели прибора.

Хотя скорей всего в некоторых случаях бесспорно останется такая необходимость.

Ну так, оно и сейчас не имеет прямой привязки, Bootstrap фреймворку пофиг какой гаджет или монитор, там всё на @media завязано. Просто есть случаи, когда необходимо сделать спец дизайн, под какое то экзотическое устройство, тогда нужны другие средства, типа той библиотеки. Я с яблофоном чисто для примера привёл, не люблю гнилое тыблоко, и просто время от времени хочется залепить спец диз в стиле конца 90-х, и к нему привязать яблофоны, или вообще всем яблофанатам отдавать страницу, где написать, чтобы покупали норм компы и прочее. Это из за их сафарского браузера, которого больше под винду нет, а значить и норм не подогнать диз под него. :D

Для Firefox подобного я пока не встречал (но и особо не искал смущ)

Для лисы есть несколько плагинов, я раньше их использовал, но теперь хватает родного - "Веб разработка -> Адаптивный дизайн", и сторонний плагин - "User Agent Switcher".

#39 
regrem патриот29.09.16 16:52
NEW 29.09.16 16:52 
in Antwort Sergo2008 25.09.16 19:48, Zuletzt geändert 29.09.16 17:25 (regrem)
Ну, как браузер распознаёт, это уже без разницы, это технология браузера(свои ява скрипты),
важно что все современные браузеры прекрасно работают с @media, а дальше ток задать нужные блоки медиа со своими размерами, и переопределить в них нужные стили.

А что делать не с современными браузерами?

Выход - это ява скрипты.


Но я не с этим.

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


@media screen and (max-width: 768px) {

}

@media screen and (max-width: 520px) {

}

@media screen and (min-width: 1200px) {

}


Кроме того, нет динамики, интерактивного режима. Так что я пришел к мысли попробовать вариант обойтись практически без CSS, тем более без медиазапросов - мне кажется это такая тоска.

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

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

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

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


#40 
1 2 3 alle