Помощник
|
Адаптивный дизайн сайта на html, нужен совет |
airman
|
Сообщение
#1
|
||
|
|
||
|
|||
k0ttee |
23.3.2015, 17:24;
Ответить: k0ttee
Сообщение
#2
|
|
минимальной кровью Дизайн изначально довольно простой, но статичные файлы все портят. Перепилить в шаблон + инклуд файла с контентом = не трудно. ;) Звезды рейтинга перепиливать не придется - они подключатся одной строкой. Изначально оно было сделано "чтобы хоть к черту лысому подошло через один инклуд". Это в общем не повод откладывать кирпичи. Разбить шаблон на "карточки", да строить их согласно ширине дисплея. Навалом видях по адаптивной верстке, но - "не все они йогурты". Вечером посмотрю более пристально и предложу свое решение. Пока сами прикиньте, как хотите видеть сайт на мобильном устройстве. -------------------- btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9 |
|
|
msd777 |
23.3.2015, 17:28;
Ответить: msd777
Сообщение
#3
|
|
Я сам не спец в таких вопросах. Но сайт как понял на движке, не чистая же статика?
Зашёл на него со смартфона. В принципе читать можно, но надо увеличивать центральную колонку. Адаптивный дизайн вряд ли поможет. Как мне кажется придётся убрать левый и правый сайтбар для этого. Но на компе всё нормально. Думаю лучше запилить мобильную версию, отдельный шаблон, в который входит только центральная колонка с контентом. -------------------- |
|
|
airman
|
Сообщение
#4
|
|
(k0ttee) Вечером посмотрю более пристально и предложу свое решение давай, жду :smile-thumb-up: -------------------- |
|
|
k0ttee |
24.3.2015, 3:54;
Ответить: k0ttee
Сообщение
#5
|
||||
|
В шапку добавить тэг, чтоб на устройствах можно было читать без масштабирования (попробуйте на одной страничке).
<meta name="viewport" content-width="device-width, initial-scale=1.0"> После этого браузеры мобилок покажут текст (и если повезет - все остальное) в адекватном экране масштабе. ;) А дальше - велосипед по вкусу... Можно медиазапросом в старых CSS менять свойства блоков. Это через: @media screen Можно подцеплять вообще другой CSS-файл по условию <style type="text/css" media="only screen and (max-width: 720px) and (max-height: 1280px)" href="mobile.css"></style> Или "карточками" перепиливать. [video]http://www.youtube.com/watch?v=Au6d1d-vFjU&list=PLHyIl59J60-U4RAIDdgsICnm0lm6nbloL[/video] Ну и ссылка на плейлист со всеми уроками (которых 6) _http://www.youtube.com/watch?v=Au6d1d-vFjU&list=PLHyIl59J60-U4RAIDdgsICnm0lm6nbloL Добавлено спустя 13 минут 32 секунды: Или просто насрать на все и прикрутить единственное условие если (юзер_агент==мобайл){ подключить другой пхп-файл, который покажет мобильную версию или редиректнуть на другой файл или изобрести велосипед в htaccess или еще как-то ну и не забыть в конце добавить exit; или die; } Так можно прикрутить все... Ну прямо "тяп-ляп и в продакшэн" :friends: Дальше уже вам решать что делать, вы ж совет спрашивали. :unsure: Добавлено спустя 4 часа 33 минуты 15 секунд: Недавно писал про будущее вебдизайна. Там в пример привел сайт авиакомпании. Собственно у них в исходниках и CSS'ах можно почерпнуть "как сделано". Под разную ширь удобно кукожится. -------------------- btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9 |
||||
|
|||||
prolisk |
24.3.2015, 11:33;
Ответить: prolisk
Сообщение
#6
|
|
Интересует как сделать сайт адаптивным на мобиле, но не по блокам или отдельным css, а чтобы мобильный браузер просто уменьшал весь сайт. То есть открывается как на ПК, только мелко-мелко, и нужно увеличивать пальцем.
Сам недавно начал интересоваться этим вопросом. Из решений: 1) делается моб.версия сайта. (m.seob.info) 2) делается отдельный css-файл. 3) пилится файл стилей под адаптивный дизайн. Прикол в том, что хорошее свойство name="viewport" как то по-разному все равно реагирует (на разных сайтах, браузерах, ПК)... -------------------- Блог вебмастера. Добавь свой сайт в белый каталог |
|
|
k0ttee |
24.3.2015, 19:50;
Ответить: k0ttee
Сообщение
#7
|
|
|
Хватит это терперь! :spiteful:
Вот короче набросок. Если не считать фоны & рекламы & сайдбар до контента, то это можно назвать малой кровью. Тестирование будем проводить вообще без крови. ;) Через плагин можно (не испортив сайт) наблюдать результаты. 1.) ставим плагин stylish в firefox 2.) открываем seob.info 3.) создаем новый стиль в плагине "для всего сайта seob.info" 4.) вставляем в редактрое один из двух вариантов кода: а.) в пикселях @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("seob.info") { @media screen and (max-width:1200px){ body{width:640px;margin:0;} #cont{width:640px} #webeffector{clear:left;width:640px} #head{width:640px} #left{clear:left} #main{clear:left;width:640px} #right{clear:left;float:left} #footer{width:640px} } } б.) в процентах (так оно будет вместо с окном кукожиться) @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("seob.info") { @media screen and (max-width:1200px){ body{width:90%;margin:0;} #cont{width:90%} #webeffector{clear:left;width:90%} #head{width:90%} #left{clear:left} #main{clear:left;width:90%} #right{clear:left;float:left} #footer{width:90%} } } 5.) сохраняем стиль 6.) уменьшаем ширину окна до "1200 или меньше" 7.) смотрим, прокручиваем 8.) начинаем радоваться, что у нас получается Для особо ленивых даю скриншот получившейся колбасы. :friends: Прокручивайте шура, она золотая... Добавлено спустя 4 минуты 22 секунды: Это набросок, который страшноват, но он уже делает что было нужно. :beach: открывается как на ПК, только мелко-мелко, и нужно увеличивать пальцем. Не делать ничего... Сарказм! Разве не так обычные веб-сайты открываются на мобильниках? :blink: хорошее свойство name="viewport" Во-во! :smile-thumb-up: Пусть браузеры до ума допилят, дадут нам ровные стандарты, а потом с веб-разработчиков спрашивают. А то взяли и сказали: битесь с этим сами, а то писсимизируем. Добавлено спустя 49 минут 15 секунд: Можно конечно все растянуть в 100% по ширине, но от фоновых картинок придется отказаться: масштабировать их больно геморно. В общем, вот к чему я пришел. @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("seob.info") { @media screen and (max-width:1200px){ body{width:100%} #cont{width:100%} #head{width:100%;background-size:contain} #left{clear:left;width:100%;background-size:contain;margin:0} #title{width:100%;background:none} #left_bottom{width:100%;background:none} #main{clear:left;width:100%;margin:0} #right{clear:left;float:left;width:100%;background-size:contain;margin:0} #title2{width:100%;background:none} #right_bottom{width:100%;background:none} #footer{width:100%;background:#D2D2D2} } } Крупные узлы вроде переставил коррекнтно, а дизайн это уже ваш выбор. -------------------- btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9 |
|
|
||
prolisk |
24.3.2015, 20:34;
Ответить: prolisk
Сообщение
#8
|
|
(k0ttee) Разве не так обычные веб-сайты открываются на мобильниках? Да должны так. Но вот некоторые мои на ВП (шаблоны типа под мобилки) и некоторые другие сайты начинают "резать" блоки, особенно если ширина в пикселях. -------------------- Блог вебмастера. Добавь свой сайт в белый каталог |
|
|
k0ttee |
24.3.2015, 22:00;
Ответить: k0ttee
Сообщение
#9
|
||
|
"резать" блоки Попробуйте заменить в стилях width на max-width Если у вас блокам заданы четкие ширины в пикселях, такое прорезиненное решение должно помочь. У меня все хорошо резинится и переносится на новый вертикальный ряд (только с float:right проблемы испытываю). Показываю - когда влезло по ширине и когда не влезло. В живую показать не могу, оно на локалке пока не допилил. -------------------- btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9 |
||
|
|||
airman
|
Сообщение
#10
|
|
(k0ttee) Прокручивайте шура, она золотая... че то не нравится такой вариант, коряво смотрится. Походу надо продумывать отдельный стиль под мобилы, без банеров, меню как-то по другому выстраивать.. -------------------- |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Вёрстка HTML-писем | 30 | Vampler | 28859 | 27.3.2024, 12:41 автор: Vampler |
|
Продвижение молодого сайта | 30 | maxmer | 6368 | 26.3.2024, 21:49 автор: c4p1t4l15t |
|
SEO-текст на главной странице сайта и в категориях | 5 | boltuk | 1355 | 26.3.2024, 21:43 автор: c4p1t4l15t |
|
Делаю полностью уникальный дизайн для сайтов! | 46 | AlexDIZ | 93503 | 26.3.2024, 20:03 автор: AlexDIZ |
|
Какой % отказов нормален для сайта? | 10 | Aloof | 2550 | 24.3.2024, 21:45 автор: Liudmila |
Текстовая версия | Сейчас: 29.3.2024, 11:52 |