адаптивный сайт
привет всем , решил свой старый сайт переделать по новой , и сделать его резиновым так сказать ,
карказ поставил, все сжимается , все работает ок ,
но у меня возникла идея сделать так чтобы левая колонка была статистическая и имела размер гдето 12 EM
и там будет лого фирмы висеть , чтобы оно не сжималось ,а было всегда одним размером ,
вот я попытался сделать и не получается , при сжатии правая сторона лезет под левую , что я не так сделал ??
каркас такой
<body>
<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>
</body>
цсс
body {
background-color: #C4C6C0;
}
.wrapper {
max-width: 960px;
margin: 0px auto;
background-color: #F3F6F7;
margin-top: 20px;
padding: 10px;
}
.header1 {
width:12em;
height: 160px;
background-color: #01DF65;
margin-bottom: 10px;
float: left;
}
.header2 {
width: 79%;
height: 160px;
background-color: #01DF65;
margin-bottom: 10px;
float: right;
}
.menue {
width: 100%;
height: 45px;
background-color: #FAF02F;
margin-bottom: 10px;
float: left;
}
.content {
width: 79%;
height: 520px;
background-color: #46CDE7;
float: right;
margin-bottom: 10px;
}
.nav {
width: 20%;
height: 520px;
float: left;
background-color: #FACC2E;
margin-bottom: 10px;
}
.footer {
clear: both;
flex: 0 0 auto;
height: 50px;
background-color: #F4CAD1;
Идея может и не плохая (сама задумка, я имею в виду).
Но принцип работы и подход, "двойка... выйди вон..." 
(шутка)
Теперь конструктивная критика.
1) если Вы хотите щирину колонки сделать с фиксированными размерами,
то и надо ширину задавать в жёстких единицах.
.nav {
width: 12em; /* ну или в пикселях, вместо width: 20%;*/
...
2) если оставить всё как есть, и выставить постоянную ширину левой
колонки, то при сжимании до мобильной версии, только эта колонка и останется.
Для основного содержания и места не останется.
3) учтя пункт 2, есть смысл сначала сделать набросок для мобильной версии,
а потом смотреть, с какой ширины есть смысл перестранивать дизайн в две колонки.
Или, если же этот сайт должен только в десктопном виде быть, то нужно установить рамки,
с которых при дальнейшем сужении появлялись бы полосы прокручивания.
при сжатии правая сторона лезет под левую , что я не так сделал ??
Вообще, при перерасчёте в проценты, нужно учитывать,
что все бровзеры по разному реагируют на border, margin и padding.
А чтоб всё сделать более-менее одинаково (одинаковые исходные параметры),
используют Normalize.css: https://necolas.github.io/normalize.css/
Ну и при перерасчёте в проценты ширин, нужно собственные border, margin и padding тоже брать во внимание.
20% и 79% не всегда достаточно, чтоб всё перекрыть.
Возможно border, margin и padding перебирают отпущенный им 1% (во всяком случае от определённых размеров сужения.)
В общем всё ясно. Всё решается парой строчек скриптов:
Измеряется ширина контейнера - это будет базовой величиной, от неё везде и во всём плясать
Потом измеряется правый край дива Kopf1 (разницы нет статический он или нет).
Это и будет левым краем дива Kopf2, ну можно и интервал поставить между дивами.
В диве header2 убрать float: right. И вообще переписать коды, чтобы абсолютными цифрами и не пахло.
Ну и опять понадобятся скрипты. Наверное придётся задавать и падинги ссылок в относительных единицах.
В общем несколько функций, расчитывать размеры и задавать динамически стили - DOM!
Прикреплённые файлы
Ну и опять понадобятся скрипты. Наверное придётся задавать и падинги ссылок в относительных единицах.
Вау
Зап
рожец на ракетном двигателе создавать будем???
Всё гениальное просто.
Чистый HTML и CSS и никаких скриптов.
Код действительно нужно переделать,
логику поменять и свойства в CSS правильно прописать.
Но колесо занова изобретать в принципе нет необходимости.
Как вариант, можно использовать простенькую функцию, чтобы расположить правую колонку за левой неизменяемой колонкой.
Но делает ли кто такую статичную колонку. В некоторых пределах и её надо изменять.
* В диве header2 убрать float: right , width. Классы поменять на дивы. ...
Прикреплённые файлы
Может поможет решить вопрос, там как раз про резиновую вёрстку с фикс колонками.
Может быть в простейших случаях, как в нашем.
Я уже делал и передлывал сайты и адаптировал шаблоны различной сложности и переплетённости дивов,
но всегда обходился стандартными средствами HTML и CSS.
Зная как оно работает, можно составить любой дизайн не используя тяжёлую аритилерию,
и при этом поставить все кубики с точностью до пикселя.
Но иногда есть необходимость сильно использовать скрипты и динамически задавать стили.
Такая необходимость может возникнуть для программирования каких-либо Apps или игр,
или динамической выдачи каких-либо графиков или статистик.
Раньше, когда я немного флэшем баловался, то там тоже многое делали через подобные скрипты.
Но там не было других вариантов.
В принципе, гвоздь можно и поленом заколотить, можно и кувалдой,
но молотком вроде как практичнее и удобнее получается.
HTML и CSS, очень мощные и удобные
инструменты.
К стати, Sergo2008 предложил этажом выше ссылку.
Чтоб потренироваться или идеи пособирать как решить проблему ТС, не так уж и плохое упражнение.
ну не надо пугатся , цвета я выставил такие, чтобы было просто удобно видеть границу дивов , потом естественно , все будет в другом цвете ,
и еще , я думаю что не стоит тут играть скриптами , думаю все можно решить правильным CSS ,
просто я не такой большой спец в этом , поэтому и попросил помоши зала
ну не надо пугатся , цвета я выставил такие, чтобы было просто удобно видеть границу дивов
Цветов я как раз и не испугался , сам так же делаю, когда непонятки возникают.
(помоему я это уже писал выше).
И было бы не плохо определиться с тем, какой дизайн Вы хотите иметь.
как написано в теме, "адаптивный" и как пишется в самом вопросе "резиновый",
это немного разные вещи. Оба немного устарели.
Сейчас пользуется популярностью "Отзывчивый дизайн"
Здесь можно прочитать о их различиях: http://wseweb.ru/diz/adaptivny-dizain.htm
Если Вы хотите оставить всё как есть, резиновый дизайн, только левую колонку сделать с постоянными размерами,
то решение я написал в моём первом ответе. Просто выставить фиксированные размеры в левой колонке.
Я думаю что не стоит тут играть скриптами …
Может тогда вообще и без CSS ?
Ставть таблицу с 2 ячейками и всё.
Да ещё надо убрать кое-что из дива header2 И показывает это так:
Так вот стоит ли делать первую колонку фиксированной величины. Нет конечно. И она должна изменяться (но не быть настолько резиновой, как правая).
Использование таблицы я привел больше для справки, я ими не пользуюсь.
Прикреплённые файлы
Ставть таблицу с 2 ячейками и всё.
не в обиду, но эту технику уже лет как 10 можно сказать никто не использует для дизайна.
- не удобная и не практичная
- много лишнего кода
- никакой динамики, (кроме как разъезжаться в тороны)
- с точки зрения семантики, таблицы тоже имеют другие назначения
- поисковики их тоже не особо любят
ну и много ещё чего говорит против использования таблиц для дизайна.
По простому выражаясь - это каменный век вебдизайна 
Вот почему я и добавил в посте:
Использование таблицы я привел больше для справки, я ими не пользуюсь
Я пользуюсь в основном скриптами, я пример вверху привёл, но что-то показался кому-то крутым, а сейчас другая крайность )))
Но и таблицы никто не отменял и иногда можно их использовать, особенно для наладки.
Предыдущее сообщение я написал ещё до того, как Вы его исправили
Но в любом случае не помешало бы знать и другим, кто этого ещё не знает.
Но и таблицы никто не отменял и иногда можно их использовать, особенно для наладки
Таблицы действительно никто не отменял.
Но всё нужно использовать по назначению.
Таблицы предназначены для размещения табелярных содержаний, статистик и прочей бухгалтерии.
У них и свойства для этого больше подходят.
Их раньше для дизайна тоже использовали.
И тогда это было очень удобно,так как другого варианта не было.
А CSS поддерживались только частично.
Сейчас всё поменялось сильно.
Попробуй:
.header1 {
position:relative;
width:12em;
height: 160px;
background-color: #01DF65;
margin-bottom: 10px;
float: left;
}
.header2 {
height: 160px;
background-color: #01DF65;
margin-left: 12.2em;
margin-bottom: 10px;
}
Кажется работает.
Прикреплённые файлы
ну задумка у меня такая, чтобы в левом верхем углу стояло лого фирмы , и чтобы оно не изменялось при именении размера экрана, а вот насчет того, что уже есть что то новое ,не знал, щас почитаю, что там есть интересного, спасибо за совет ,
а какая будет разница , если я изменю в коде класс на див ? что изменится ?
В твоем случае никакой разницы.
А вот других случаях, где задаются скриптами стили, там нужны дивы и их 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, тем более без медиазапросов - мне кажется это такая тоска.
Вариант - это ява скрипты. Легко проверить с чем работает программа. Потом можно задавать динамически стили и очень гибко.
Но я столкнулся уже с одной проблемой. Программе нужно постоянно отслеживать находится смартфон в горизонтальном или в вертикальном положении.
Пришлось поставить таймер, но он и для другой цели пригодится.
Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты, хотя я точно не знаю какие это браузеры, может и не стоит обращать внимания.
А что делать не с современными браузерами?
Выход - это ява скрипты.
Ну в принципе можно...
вопрос стоИт тогда, а зачем оно нужно??? 
Техника развивается сейчас с такой скоростью, что старые бровзеры практически вымирают.
Бывают правда случаи, когда люди пользуются и старыми компами, но это уже можно сказать исключение.
За старейшую версию сейчас уже принято считать Win7.
У меня правда были 2 случая в этом году, что у владельца в бюро стоял ещё лэптоп с вистой,
заморочки были, многое не так отражалось как на нормальных системах.
А все остальные как минимум Win7 или 10.
Да и всё что старше, уже даже не поддерживается практически никем.
Доказательством тому была акция MS,
в ходе чего они большую часть старых Виндовсов на 10-ку бесплатно перевели,
чтоб большинство на определённый и одинаковый уровень вывести.
Да и если разобраться,
то владельцу сайта будет дешевле новый комп или ноутбук купить (они сейчас не такие уж и дорогие)
чем чтоб его сайт кто-то специально для его старого компа на ява-скрипте переделывал.
Если это чисто как хобби рассматривать, то тогда есть где разгуляться ,
но с коммерческой точки зрения, это не рентабельно.
Но всё-таки это не совсем адаптивный сайт получится, проглядывает дискретность
Как раз наоборот.
max-width: или min-width:, это всего лишь границы где вид должен (относительно сильно) меняться.
А между границами всё как-раз динамично переплывает.
Кроме того, нет динамики, интерактивного режима.
Для "обычного" сайта интерактивность вроде как и не нужна.
Главное, чтоб сайт в обычном режиме хорошо работал и был доступным.
Причину читаем в следующей цитате (см. ниже)
Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты,
хотя я точно не знаю какие это браузеры.
Это скорей всего связано не с бровзером, а с настройками и отношением владельца PC к ява-скриптам.
Раньше это было "зло
". Многие по привычке и сейчас его блокируют.
Ява-скрипт вообще мощная штучка,
можно серьёзные инструменты программировать,
Но использовать его чисто для дизайна, это немного не то.
Есть ситуации, когда это действительно надо, но потом нужно всё так подогнать,
чтоб посетитель и без скрипта мог сайтом пользоваться.
Хотя, у всех свои интересы и приоритеты.
Так что, если есть желание, то почему бы и нет?
Так что, если есть желание, то почему бы и нет?
Да не только это желание. Я хотел бы ещё загрузить самодельный audio player.
Но он опять на скриптах. Ну не нравятся стандартные на смартфоне - и давануть то не куда.
Кроме того самодельный хоть как можно располагать по экрану и любой размер применить в зависимомти от задачи.
@media используются только в минимум 768px и 2 значения выше, для значений выше идёт фикс контейнеров по ширине, а всё что ниже, резина на всю ширину, на смартфонах колонкам нет места, читать невозможно будет без увеличения размера.
Советую посмотреть как всё это дело реализуется в ксс фреймворках, на них делают отличные адаптивные дизайны, при этом без применения скриптов для замера размеров экрана. Скриптов достаточно для реализации эффектов/анимации, для всего остального, ну разве что в совсем экстравагантных случаях.
ПС. Я уже выше писал, что есть пхп библиотеки, не ток ту что привёл, которые могут определить какое устройство, и если скажем нужно отдельно вёрстку по смартфоны, то не каких js скриптов и не нужно, один раз проверил, записал в куки или сохранил в сессию, и всё, не каких больше проверок и лишних нагрузок нет. ИМХО!
Что касается старых браузеров, то сегодня уже не кто на это не обращает внимание, ещё пару-другую лет назад, да, нужно было, но не сегодня, из за 1-2% возможных посетителей под 6-8-м ослом, изголяться с дизайном, нафиг нужно, можно просто вывести сообщение, что бы обновили браузер.
Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты,
хотя я точно не знаю какие это браузеры.
Я не считаю это проблемой, сайт может прекрасно работать без скриптов, и при этом иметь современный вид и анимацию на html5 и css3. Единственно что старые браузеры не поддерживают, или частично поддерживают html5 и css3, но и тут, всё отобразится вполне нормально,
разве что анимация работать не будет. Так что, ява скрипты тут не нужны, и к браузерам отношения они не имеют, ну разве что для какого самописного браузера начинающего кодера.
Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты,
хотя я точно не знаю какие это браузеры.Это скорей всего связано не с бровзером, а с настройками и отношением владельца PC к ява-скриптам.
Раньше это было "зло
Я не любитель ява скриптов, и в браузере стоит блокировщик. Я блокирую к примеру не по привычке, а в виду того, что на сайтах могут быть внедрены зловредные ява скрипты, плюс всякие сборщики данных, да и вообще перезагружены скриптами так,
что браузер начинает тормозить. Я считаю, что блокировать скрипты на незнакомом сайте нужно, и разрешать их вручную, только после знакомства с тем что хочет грузиться. Проблема скорее в том, что иногда сайты так завязаны на скрипты, или вообще на них написаны, что они не открываются вообще. Ява скрипты исполняются на стороне клиента, а это большая проблема, когда не знаешь что они делают у тебя на компе.
Я уже выше писал, что есть пхп библиотеки, не ток ту что привёл, которые могут определить какое устройство, и если скажем нужно отдельно вёрстку по смартфоны, то не каких js скриптов и не нужно, один раз проверил, записал в куки или сохранил в сессию, и всё, не каких больше проверок и лишних нагрузок нет. ИМХО!
Что-то не верится, что есть пхп библиотеки, которые определят какое устройство. Для PHP это безразлично, он ничего не видит.
Хранить значения устройств он может, но требуется серверу передать и это сделает js скрипт.
Потом легко переходить со одной страницы на другую в зависимомсти от устройства.(принудительный переход)
Но опять надо не забывать, что пользователь может крутить смартофон и переключения дизайна не будет, даже если хранится информация.
Надо постоянно измерять ширину экрана и определять в каком положении смартфон.
В общем думаю, мало пользы от PHP, если только нет переключения с одной страницы одного дизайна на другую страницу другого дизайна.
Там может ещё PHP пригодиться.
На смартфонах колонкам нет места, читать невозможно будет без увеличения размера.
Ну почему?
Можно позволить одну колонку, если смартфон находится в горизонтальном положении.
А вот в вертикальном положении да, надо колонку убирать, содержимое этой колонки нужно переносить, может придётся даже пожертвовать чем-то.
Но размеры шрифта, рисунков изменять не требуется.
Что-то не верится, что есть пхп библиотеки, которые определят какое устройство. Для PHP это безразлично, он ничего не видит.
Хранить значения устройств он может, но требуется серверу передать и это сделает js скрипт.
PHP не знает, но это знает браузер, он то и отдаёт серверу необходимую информацию, которая и разбирается серверным скриптом.
Но опять надо не забывать, что пользователь может крутить смартофон и переключения дизайна не будет, даже если хранится информация.
Сколько можно то, уже ведь писал, для этого есть @media, меняется ширина страницы при повороте, меняется стиль. Нужно колонку на смартфоне в альбомном виде, нет проблем, задаём колонкам нужные настройки в медиа, и всё. Зачем изобретать велосипед, не понимаю?
Лан, дальше вести дискуссию на эту тему нет желания, если вы считаете что без ява скрипт нельзя решить того, что другие решают на ура, на голом хтмл и ксс, плюс по надобности на пхп, то окей, переубеждать не стану.
Ты наверное не по адресу выкрикиваешь. Автор темы не давал повод для этого.
Если кого критиковать, то это меня - я вылез с разговором про возможность делать адаптивный сайт и при помощи скриптов.
Ну конечно не такой, какой ты здесь рекламирушь, а с динамикой, слоями-дивами итд.
Ну конечно надо всё-таки вначале максимально пытаться обойтись без скриптов.
