1.Один веб-сайт, все браузеры.
Как упомянул @Tak, ответы здесь - это «Прогрессивное улучшение» и «Изящная деградация».Однако определения, которые он дал, не совсем верны.Вот правильные:
' Прогрессивное улучшение ' ( см. Ссылку ) означает, что вы сначала кодируете для старого браузера (IE6 / 7 с / без JavaScript - этохорошая отправная точка) с использованием проверенных и проверенных технологий, таких как HTML4 и CSS1, а затем добавьте улучшение по мере прохождения тестирования в более современных браузерах, вплоть до Chome и Safari на мобильных устройствах, которые поддерживают CSS3 и большую часть HTML5.Таким образом, вы стремитесь предоставить любому браузеру наилучшую возможную комбинацию поддерживаемых в нем функций (кстати, он никогда не будет идеальным, поэтому имейте в виду правило 80/20 , чтобы избежать запуска проекта вземля).
' Изящная деградация ' ( см. ссылку ) - это то же самое, но в обратном направлении, это более ленивый способ сделать это.Вы начинаете создавать свой сайт с использованием современного браузера, а затем применяете «исправления» и «исправления», пока они не станут приемлемыми для старых браузеров.В конечном итоге это создает гораздо больше работы, чем правильное планирование с самого начала, и что обычно происходит с таким подходом, так это то, что разработчик / заинтересованная сторона в какой-то момент сдастся (т. Е. Какого черта?работая в IE6 / 7 - я просто удалим их из области видимости)
2.Лучший способ стандартизировать макет
Лично я советую вам использовать стандартную раскладку для мобильных и настольных устройств и использовать комбинацию БОЛЬШИХ шрифтов (чтобы они были видны на крошечном мобильном устройстве).экран) и маленькие (чтобы пользователи с настольным браузером могли прочитать все детали) на рабочем столе размером 900-1000 пикселей.
Этот сайт является примером:
http://www.valuetrader.net
Когда я открываю его в браузере рабочего стола, я вижу много деталей, но когда я в путии используйте на своем смартфоне всю критически важную информацию (т.е. я должен КУПИТЬ или ПРОДАТЬ акцию?), отображенную очень крупным шрифтом, который легко читается на моем крошечном экране.*
Эта часть вопроса теперь фактически изменилась на «Каков наилучший способ реализации макета?» .
На данный момент (и за последние несколько летдоступна поддержка CSS3) стандартный подход к разработке макетов для нескольких устройств заключается в использовании так называемого адаптивного макета, основанного на медиазапросах .Существует множество CSS-фреймворков , которые помогут пользователям начать работу с мобильными макетами.
Основной принцип «отзывчивого» дизайна заключается в том, что прокрутка на мобильных устройствах делает вертикальное пространство практически бесконечным, поэтому вы ограничены только горизонтальным пространством.Таким образом, вы должны убедиться, что по мере уменьшения размера экрана вы позволяете потоку страниц заполнять все доступное горизонтальное пространство, а любые навигационные панели или горизонтальные элементы сгибаются вертикально так, чтобы элементы располагались друг над другом, а не с использованием пространства.по горизонтали.
Стандартный способ проверить «отзывчивость» сайта - перетащить боковую часть окна браузера, чтобы уменьшить доступную ширину.
Лучшим способом является использованиеИнструменты разработчика, например, Chrome имеет кнопку для переключения режима устройства, вот пример использования Stackoverflow:
Пример медиазапроса для указаниямакет для элемента #site-banner на настольных и мобильных экранах будет выглядеть следующим образом:
/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }
/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
#site-banner { width: 700px; }
}
/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
#site-banner { width: 480px; height: auto; }
}
/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
#site-banner { width: auto; height: auto;}
}
3.Как выполняется динамическое масштабирование изображения?
Мобильное устройство делает многое для вас, поэтому обычно вам просто нужно понять, как оно работает. По сути, когда вышли первые мобильные браузеры, они должны были убедиться, что сайты, которые уже работали для настольных браузеров, работали и на мобильном телефоне (иначе никто не использовал бы их смартфон для просмотра веб-страниц), поэтому им пришлось придумать умные способы определения ширины сайта и изменения его размера до разрешения экрана, которое у них было доступно.
Например, мой сайт ' www.desalasworks.com ' кодируется до ширины 900 пикселей, но он отлично работает, если его уменьшить на небольшом экране размером 320 пикселей (изображения на странице автоматически передискретизировал , используя различные методы - такие как выборка ближайшего соседа и бикубическая интерполяция , и шрифты заменяли, по возможности, на собственные шрифты). Что касается выборки изображений, если вы когда-либо ущипнули фотографию на своем смартфоне для «увеличения» и «уменьшения», вы понимаете, о чем я говорю.
Как правило, вам не нужно беспокоиться о CSS для правильной повторной выборки изображений. Я заметил, что иногда они немного забавны при использовании процентной ширины, поэтому придерживайтесь пикселей, если это так, чтобы браузеру было легче определить, где пункты по отношению друг к другу. Обратите внимание, что вы МОЖЕТЕ определенно определить мобильный браузер и установить ширину вашего сайта в 320px, и все в нем должно быть соответствующим образом встроено, но на самом деле это не обязательно, чтобы иметь рабочий сайт на мобильном устройстве, и это заставит вас поддерживать 2 сайта, мобильный сайт и сайт для настольных компьютеров (что некоторые компании рады сделать).
4. Проценты / фиксированная ширина.
Лично я склонен использовать фиксированную ширину по центру экрана (используя CSS margin: 0px auto), я не использовал процентную ширину в течение ДЛИТЕЛЬНОГО времени, в основном потому, что это немного кошмар для стандартизации макета. Если вы используете процентную ширину, вам, в основном, придется проводить гораздо больше тестов, поэтому я склонен отклоняться от них.
Имейте в виду, что это только мое мнение, некоторые гуру-репортеры будут ругаться на ширину в процентах почти на все, я просто не продан идее пожертвовать предсказуемостью макета ради того, что я считаю незначительной выгодой , Но потом я пришел из опыта создания настольных веб-приложений, и я бы, возможно, подумал бы иначе, если бы я просто сосредоточился на мобильном вебе (где горизонтальное пространство стоит дорого, а макеты, как правило, проще).