Ответ 1
1. Один веб-сайт всех браузеров.
Как сказал @Tak, ответы здесь - "Прогрессивное улучшение" и "Изящная деградация". Однако определения, которые он дал, не совсем правильные. Вот правильные:
' Прогрессивное улучшение' (см. ссылку) означает, что вы сначала кодируете старый браузер (IE6/7 с/без JavaScript является хорошей отправной точкой) с использованием проверенных технологий, таких как HTML4 и CSS1, а затем добавьте улучшения при прохождении через тестирование на более современные браузеры до Chome и Safari на мобильных устройствах, которые поддерживают CSS3 и большую часть HTML5, Таким образом, вы ставите целью обеспечить любой браузер с наилучшим сочетанием поддерживаемых в нем функций (его никогда не будет идеальным, так что не забывайте 80/20, чтобы избежать запуска проекта в землю).
' Изящная деградация' (см. ссылку) - это то же самое, но наоборот, ее более ленивый способ делать это. Вы начинаете создавать свой сайт против современного браузера, а затем применяете "исправления" и "исправления" до тех пор, пока он не станет приемлемым для старых браузеров. Это в конечном итоге создает намного больше работы, чем планирование с самого начала, и то, что обычно имеет тенденцию происходить с этим подходом, заключается в том, что разработчик/заинтересованная сторона в какой-то момент откажется (например, что, черт возьми, слишком много работает, чтобы получить это работая в IE6/7 - я просто сниму их)
2. Лучший способ стандартизации макета
Лично мое предложение состоит в том, что если вам нужен стандартный макет для мобильных и настольных устройств, я предлагаю вам использовать комбинацию БОЛЬШИХ шрифтов (чтобы они были видны на маленьком мобильном экране) и небольших (так что люди, у которых есть рабочий стол браузер может читать все детали) на ширине стола 900-1000 пикселей.
Этот сайт является примером:
Когда я открываю его в своем браузере для рабочего стола, я вижу много деталей, но когда я нахожусь на ходу и использую свой смартфон всю важную информацию (т.е. должен ли я покупать или продавать акцию?), отображается на очень большой шрифт, который кажется разборчивым на моем маленьком экране.
ОБНОВЛЕНИЕ 2014
Эта часть вопроса теперь эффективно изменилась на "Каков наилучший способ реализации макета?".
В настоящий момент (и за последние несколько лет широко доступной поддержки 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 'кодируется до 900px ширины, но он отлично работает, уменьшая масштаб на небольшом 320px экран (изображения на странице автоматически переэмпилированныеиспользуя различные методы, такие как выборка ближайших соседей и бикубическая интерполяция, а шрифты заменяются родными шрифтами, где это возможно). Что касается выборки изображений, если вы когда-либо зажимали фотографию на своем смартфоне, чтобы "увеличить масштаб" и "уменьшить масштаб", вы знаете, о чем я говорю.
Как правило, вам не нужно беспокоиться о CSS, чтобы ваши изображения были правильно настроены, я заметил, что иногда они немного забавны при использовании процентной ширины, поэтому придерживайтесь пикселов, если это так, чтобы браузеру проще было определить, где предметы относятся друг к другу. Обратите внимание, что вы МОЖЕТЕ конкретно определить мобильный браузер и установить ширину вашего сайта на 320 пикселей и все в нем, чтобы упасть в строке соответственно, но на самом деле это не обязательно, чтобы рабочий сайт на мобильном устройстве, и это заставит вас для поддержки 2 сайтов, мобильного сайта и рабочего стола (что некоторые компании с удовольствием делают).
4. Процент/фиксированная ширина.
Лично я склонен использовать фиксированную ширину, центрированную на экране (с использованием поля CSS: 0px auto), я не использовал процентную ширину для времени LONG, главным образом потому, что его немного кошмар для стандартизации макета. Если вы используете процентную ширину, вам в основном придется делать гораздо больше тестов, поэтому я бы склонен отклоняться от них.
Помните, что это только мое мнение, некоторые гуру "репрессивных веб" будут ругаться по процентной ширине почти во всем, меня просто не продают по идее жертвовать предсказуемостью макета для того, что я вижу в качестве предельной выгоды, Но потом я пришел с фона для создания webapps рабочего стола, я, вероятно, подумал бы по-другому, если бы я просто сосредоточился на мобильной сети (где горизонтальное пространство на высоте, а макеты, как правило, проще).