Страница адаптируется к разрешению экрана. Чтобы посмотреть как это происходит, можно зажать клавишу Ctrl и покрутить колесико мышки в обе стороны. Вы увидите, как страница будет отображаться на экранах с большим и меньшим разрешением.
И как Вы написали "Ctrl и покрутить колесико " не проверишь адаптивную верстку, для этого нужно запустить режим адаптивного дизайна в браузере и там уже смотреть как выглядит страничка при различных разрешениях экрана.
Да и если посмотреть страничку при большом разрешении - http://puu.sh/gf7T9/2265e9eadf.jpg - как то не видно, чтобы блоки меняли свое расположение для приятного просмотра.
Ispanec, колесико в другую сторону не пробовали крутить?
(И вместо ссылок на статьи в википедии дали бы лучше ссылки на свои работы, было бы о чем говорить.)
Для разрешения больше 1280 сайт уже не растягивается вширь. Иначе он будет выглядеть сплошной некрасивой горизонтальной полоской. Мы уберем пустое место справа, но сделаем много пустого места внизу. Это все можно обсуждать.
Смысл адаптации: уйти от горизонтального скролинга для маленьких экранов (планшетя телефоны), и максимально использовать возможности экранов с большим разрешением, избегая по возможности вертикального скроллинга. Для экранов больше 1280 никакого скроллинга (ни по вертикали ни по горизонтали) не будет, потому и не нужно уже ничего делать.
Вот картинки, поясняющие, как эта адаптация работает:
Последний раз редактировалось aveugle; 28.02.2015 в 00:44.
Для разрешения больше 1280 сайт уже не растягивается вширь. Иначе он будет выглядеть сплошной некрасивой горизонтальной полоской. Мы уберем пустое место справа, но сделаем много пустого места внизу. Это все можно обсуждать.
А если у меня разрешение 1920x1080? И кстати про планшеты с разрешением 2048x1536. Ваш вариант выглядит не презентабельно в этом смысле. Могли бы хотя бы сделать по центру расположить сайт. А лучше использовать медиа-запросы, чтобы для все устройств было корректное отображение.
Сообщение от aveugle
(И вместо ссылок на статьи в википедии дали бы лучше ссылки на свои работы, было бы о чем говорить.)
Ну мы в данной теме собрались не мои работы обсуждать. Я Вам лишь показал, что мне не понравилось.
Решил заглянуть в сам html и css. Такой вопрос почему не любите ссылки? На весь шаблон всего одна ссылка (на почте), все остальное имитирует визуальный вид ссылки этим
Код:
cursor: pointer;
Заказчик, думаю, был бы не доволен этим.
Хотелось бы поинтересоваться насчет этого. Какую проблемы пытались решить этим?
Код:
div { display:table; }
Последний раз редактировалось Ispanec; 28.02.2015 в 01:28.
Сайт, который выдает картинки разного разрешения в зависимости от размеров экрана клиента, конечно круче, чем то, что показал я. Но, мое решение тоже позволяет решить проблему обеспечения универсальности на каком-то уровне. Для сайта определенного бюджета это тоже будет неплохим решением IMHO. Особенно, если учесть, что даже ту адаптацию, которую показал, встретишь не часто.
Возможно, я выложу сайт, у которого масштабируется контент (вместе с графической частью). Это могут быть заготовленные картинки для типовых разрешений, а могут быть, выдаваемые скриптом по запросу. Можно подгрузить браузер, заставив его заниматься масштабированием. Много вариантов. Можно будет подумать. Выбрать.
И еще, здесь я принципиально не использовал javaScript. Я поставил перед собой задачу попробовать решить проблему чистым html+CSS. Возможности обработки события типа onResize открывают огромный кладязь для адаптации. Возможно ( будет время), покажу и его. Были бы заказчики, готовые платить за подобный сервис...
-------
Изменение свойств отображения дивчика на table дает возможность сделать его боле податливым с своему содержимому. Такой контейнер не будет автоматически пытаться занять все доступное ему пространство по ширине с одной стороны, и при этом легко растягивается под действием своего содержимого с другой. В ряде случаев это очень удобно.
А еще, можно указать max-width. Такой контейнер легко будет становиться меньше, если его будет поджимать снаружи, но никогда не разрастется больше определенного размера, если только не столкнется с переполнением. Именно благодаря такому свойству (table-layout:layout) мы можем плавно менять размещение плавающих блоков. Когда страница позволяет, то он расширяется, а когда поджимает правый край окна просмотра, плавающие блоки содержимого такого контейнера перестраиваются в более узкую структуру.
------
Что до ссылок. Ну понятно, что при верстке коммерческого шаблона, все ссылки будут ссылками. Просто какой смысл был сейчас засорять лишними тегами html, когда задача стояла показать адаптацию к разрешению. (Вы бы еще придрались, что я form не использовал вокруг input'ов.)
---------- Сообщение добавлено 01:38 ---------- Предыдущее 01:22 ----------
Вдогонку, я рад, что у вас большой монитор! Киньте сюда скрин сайта, одной небольшой малобюджетной конторы, у которой нет денег на хорошую верстку. Вот этой: http://www.daimler.com/
Что там с растягиванием на весь ваш FullHD монитор и центрированием?
Последний раз редактировалось aveugle; 28.02.2015 в 02:33.
нужно, текущий макет сайта (вот сам шаблон _http://themeforest.net/item/olympia-premium-responsive-cscart-theme/6365195 ) сделать адаптивным под мобильные устройства, чтобы он проходил проверку у гугла. CMS - CS Cart Цена вопроса и сроки в ЛС, пожалуйста, если готовы взяться за работу.