Как сделать чтобы сайт отображался на всех экранах одинаково
Как сделать один сайт для всех устройств (Responsive Web Design) / Хабр
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}
На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».
Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Подробная оригинальная статья «Fluid Images».
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Например, так:
/* начало css */
Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).
@media only screen and (min-width: 480px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
@media only screen and (min-width: 768px) {
Планшеты в режиме portrait.
}
@media only screen and (min-width: 992px) {
Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.
}
@media only screen and (min-width: 1382px) {
Десктоп с большими разрешениями, телевизоры.
}
/* конец css */
media queries понимают все разумные браузеры. Для ie же есть Respond.js
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Подробнее о Mobile first
Ссылки
1. Русскоязычный блог о Responsive Web Design
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
Сделайте так, чтобы ваш сайт выглядел одинаково при разных разрешениях экрана / - Специальные возможности - SitePoint Community
Tyrone79:В настоящее время я создаю страницу с разрешением 1440 x 990.
Я использую в качестве единицы измерения em и проценты. Позволяет ли это отображать страницу, аналогичную разрешению 1440 x 990, независимо от того, какое разрешение использует средство просмотра?Это правильный способ обеспечить правильное отображение вашей страницы в различных разрешениях? Есть другой способ?
Кроме того, когда я изменяю размер своего браузера (минимизирую), элементы на странице кажутся
подстраиваемыми под размер браузера, возможно, из-за того, что я использую проценты?Как сделать, чтобы страница в свернутом виде выглядела как развернутое окно?
Как правило, проектирование под размер окна не является хорошей идеей.Когда я создаю новый дизайн, я постоянно меняю размер окна, чтобы убедиться, что оно выглядит правильно при любом размере. Потому что у некоторых людей экраны разного размера, работающие с разным разрешением. Некоторые люди увеличивают свое окно до максимума, а другие - нет. У некоторых людей работают боковые панели, некоторые браузеры занимают больше места, у некоторых размер шрифта по умолчанию больше или меньше.
Использование ems и процентов, как правило, является хорошим способом создания гибкого сайта, который впишется в любое открытое окно.
Обычно проценты относятся к окну браузера или родительскому элементу. Итак, если у вас есть что-то внутри
, которому вы задаете ширину 50%, это 50% от полной ширины. Если у вас есть что-то внутри, которому вы задаете ширину 50%, это 25% от полной ширины. Это гарантирует, что ваш дизайн останется пропорциональным, когда окно растягивается и сжимается.
Иногда вам может потребоваться немного больше контроля - например, вы можете захотеть ограничить максимальный размер, до которого может расти вся страница или конкретный элемент, или ограничить, насколько узкими они могут быть - поэтому используйте max-width
и мин-ширина
для тех.Если вы укажете размер в em
s, он будет масштабироваться с размером текста, поэтому вы можете установить его примерно так, чтобы дать максимальную или минимальную длину строки (то есть количество символов / слов в строке). Хорошо иметь сайт, который идеально масштабируется, но если у вас есть макет из 3 столбцов и кто-то раздвигает окно до ширины 200 пикселей, это оставляет только крошечное, крошечное пространство для каждого столбца, что сделает его почти нечитаемый - вот когда полезно установить переопределение минимальной ширины.
java - Как создать несколько экранов в одном окне?
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
c # - сделать экран загрузки одновременно с изменением индекса выбора
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и б
html - Как сделать сайт с мобильным дизайном похожим на разные разрешения экрана
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя