[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Адаптивная вёрстка.
Страницы: 1, 2
Миша
Скиньте пжл. ссылки сайтов, у которых по вашему мнению дизайн и вёрстка выполнены на отлично.



_____________
Принимаю заказы, писать в ЛС
bestxp
wrapbootsrap.com любой шаблон live preview все адаптивные)
Guest
http://mediaqueri.es/
asstral
html5up куда же без него)
kebalchisha
да по моему все сайты на bootstrap довольно таки адаптивно работают, если грамотно интегрирован
Миша
Объясните что же такое адаптивная вёрстка. Я понял так:

1 Используя @media в css3 - размеры, создаётся вёрстка под разные устройства (смартфоны, планшеты, ноутбуки, ПК, Smart TV, Retina Display).

2 Все размеры задаются в процентах, а шрифт в em, но тут не совсем понятно, если дизайн уникальный и задаётся в пикселях?

3 Весь контент (изображения, видео) подгружается под конкретное устройство (для слабого устройства - минимум трафика).

Опять же для старых браузеров мы подключаем библиотеки, а это дополнительный трафик для пользователя (только IE 6, 7 - 500.000 человек в месяц -> статистика по браузерам). Уменьшая размер контента создаётся дополнительная нагрузка на сервер. Насколько вообще нужна адаптивная вёрстка, не лучше сделать мобильную и полную версию сайта? И почему в новой версии VK не использует адаптивную вёрстку wink.gif

Самое важное, под какие размеры актуально делать адаптивную вёрстку?

_____________
Принимаю заказы, писать в ЛС
Zzepish
Медведь
1,2 - ты прав. 3 -тут не знаю.
На ie положи! Пусть люди на нем страдают, ибо зачем страдать верстальшикам?

Лучше, но удобнее пилить адаптив, ибо так тебе придется кучу всего подключать и проверять, а при адаптиве -только экран.

Ибо в вк сидят конченные дегенераты, которые запилили критически неудобный дизайн для пк.

На тему размеров - в хроме есть инструмент для адаптивной верстки. Я делаю выводы из него (и своего телефона, ноутбука и пк)
bestxp
Вк - вообще не показатель того что и как стоит делать или не стоит, они на своей волне)
ато начинают вк то,вк се, ну удобнее им сделать так, у них по сути вообще мобильное приложение на всех платформах и мобильная версия это рудимент кмк, и не более
Astin
Цитата
Насколько вообще нужна адаптивная вёрстка, не лучше сделать мобильную и полную версию сайта?

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

Цитата
2 Все размеры задаются в процентах, а шрифт в em, но тут не совсем понятно, если дизайн уникальный и задаётся в пикселях?

Не обязательно все размеры задавать в процентах а тем более шрифт в em. Это скоре можно будет применить больше когда ты будешь сам писать медиазапросы.

Но зачем тебе это нужно, учи bootstrap, отличная штука, вот тебе ссылка BOOTSTRAP

На первый взгляд, да, голова кругом от всего этого кода, но если немного вникнуть в
bootstrap то все будет понятно, он кстати не создает лишнего кода в HTML разметке,
все классы придельно понятны что и к чему, почитай документацию и примеры.
Если что непонятно, то Вот Здесь человек отлично все расписывает и показывает на примерах, там у него уроки по этому делу, и все бесплатно.

Если хочешь адаптивную верстку, то по любому придеться хоть немного вникать в
документацию.
_
Zzepish
Astin
Цитата

Но зачем тебе это нужно, учи bootstrap, отличная штука, вот тебе ссылка
http://bootstrap-3.ru/bootstraptheme.php

Категорически не соглашуь! (не про то, что бутстрап хорошая штука). Пусть учит сам с нуля. ПОтом переходит на бутстрап исключительно для увеличения скорости разработки.

Цитата
На первый взгляд, да, голова кругом от всего этого кода, но если немного вникнуть в
bootstrap то все будет понятно, он кстати не создает лишнего кода в HTML разметке,
все классы предельно понятны что и к чему, почитай документацию и примеры.

Ничего сложного в нем нет wink.gif
Astin
Цитата
Категорически не соглашуь! (не про то, что бутстрап хорошая штука). Пусть учит сам с нуля. ПОтом переходит на бутстрап исключительно для увеличения скорости разработки.

Здесь я с тобой спорить не буду, сколько людей столько и мнений, но botstrap это непросто
взял и поставил класс, там тоже нужна своя логика как и везде. Ему по любому придется
смотреть в документацию и изучать что откуда берется и какие стили. Вот к примеру есть
у ботстрап только несколько стилей кнопок, а вот хочу с градиентом серо буро малиновую,
для этого смотрим в стилях в ботстрап как прописываются эти кнопки, ну и соответственно делаем свою, даже без медиа запросов, их можно оставить на ботстрапе. Вот тебе и небольшое
углубление в изучение и саморазвитие. А сначала самому учить все это, а потом идти к
ботстрапу, слишком долговато получится, а так по ходу все на практике.

Цитата
Ничего сложного в нем нет

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

_
Миша
Цитата (Zzepish @ 15.06.2016 - 15:50)
3 -тут не знаю.

Без этого как я понял получится отзывчивая, а не адаптивная вёрстка. И всё же какие размеры экранов использовать?

_____________
Принимаю заказы, писать в ЛС
Astin
Я же тебе ссылку на документацию дал, так там все написано, какие размеры экранов используются, ну и сам что то при желании можешь добавить

В ботстрап используется

1)Очень маленькие устройство Телефоны (<768px)

2)Малые устройства Планшеты (≥768px)

3)Средние устройства Настольные (≥992px)

4) Большие устройства Настольные (≥1200px)

Почитай документацию, про это написано в самом начале в меню "CSS"

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

Это тема не маленькая чтоб расписывать все в двух постах. Учи, будут конкретные вопросы или проблема то тогда уж и интересоваться. А про экраны я тебе написал.
_
Миша
BOOTSTRAP, для начала самому надо разобраться, а потом использовать готовые решения.

Я про 320 и 480 используете?

_____________
Принимаю заказы, писать в ЛС
Astin
Цитата
BOOTSTRAP, для начала самому надо разобраться, а потом использовать готовые решения.
Я про 320 и 480 используете?

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

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.