Я недавно обновляли свои веб-сайты и веб-сервер и добавить новый сайт (LoveCrete.org). Я хотел бы иметь фоновое изображение на LoveCrete и понял, что, конечно, 1 размер не подходит для всех экранов. Вот краткое изложение того, что мое мышление было и то, что я сделал для удовлетворения самых разных размеров экрана и ориентаций.
Какая ориентация
Я начал с того, что составил себе столик со всеми распространенными резолюциями ПК и таблетки (в горизонтальной ориентации). Я решил сосредоточиться на этом, потому что большинство изображений доступны в альбомной ориентации, так что это разумное место для начала.
Я решил, что я буду размещать изображения по центру на странице, и в некоторых случаях края будут потеряны за краем экрана.. Когда телефон используется в портретной ориентации, он будет загружать изображение в зависимости от высоты (не ширина) и потеряет много как от края изображения. Выполнение этого любым другим способом означало бы необходимость обрезки изображений до совершенно другой формы или использование «мозаичного» изображения ландшафта на высоком экране., что не желательно.
Соотношения максимального размера изображения в каждой группе были все вокруг 1.6 с несколько выше. Чтобы было проще, я решил использовать соотношение 16:10 для всех изображений и придумал размеры, чтобы сделать соответственно.
Это означает, что в большинстве случаев изображение не будет идеально соответствовать размеру экрана, но все экраны получат что-то очень близкое, и ни один экран не окажется слишком маленьким. Это также означает, что исходное изображение может быть обрезано для 16:10 один раз, а затем несколько размеров легко создаются
группы разрешения Общие ландшафтные
| Высота | ширина | Изображение сделать | Комментарии | ||
|---|---|---|---|---|---|
| 4:3 | 16:10 | 16:9 | |||
| 2160 | 2880 | 3840 | 2400× 3840 | 4к UHD | |
| 1600 1536 1440 | - 2048 1920 | 2560 - - | - - 2560 | 1600× 2560 | |
| 1200 1080 1050 | 1600 1440 1400 | 1920 - 1680 | - 1920 - | 1200× 1920 | Full HD 1080p |
| 960 900 | 1280 1200 | 1536 1440 | - 1600 | 1000× 1600 | |
| 800 768 720 | - 1024 960 | 1280 - - | - - 1280 | 800× 1280 | 720р |
| 600 576 | 800 768 | 960 - | - 1024 | 640× 1024 | |
| 480 | 640 | 768 | 480× 768 | ||
Как видите, я сгруппировал довольно много резолюций и затем сделаю 1 изображение, которое охватит все высоты до самой большой высоты в этой группе. Я позабочусь о том, чтобы изображение также было достаточно широким для максимальной ширины, с которой такая высота могла бы сочетаться на обычном экране.. Я не учел необычные конфигурации, такие как 21:9 мониторы или несколько экранов - где-то должен быть предел!
Так как CSS использует размер окна просмотра или браузера, а не размер экрана. Для горизонтальных экранов необходимо использовать ширину, а не высоту - так как в большинстве систем верх и низ теряют место для заголовков и т. д., в то время как ширина обычно максимизируется. однако, для портретных дисплеев лучше использовать свойство высоты. Это может быть сделано как CSS можно определить ориентацию экрана
The CSS используется то выглядит следующим образом
тело{фон-повторить: не повторять; фон-вложение: исправлено; фон положение: центр центр; фон-размер: покрытие;}
@СМИ (Максимальная ширина: 768ПВ) {тело { фоновая картинка: URL(bg480.jpg); }}
@СМИ (мин-ширина:769ПВ) и (Максимальная ширина: 1024ПВ) {тело { фоновая картинка: URL(bg640.jpg); }}
@СМИ (мин-ширина:1025ПВ) и (Максимальная ширина: 1280ПВ) {тело { фоновая картинка: URL(bg800.jpg); }}
@СМИ (мин-ширина:1281ПВ) и (Максимальная ширина: 1600ПВ) {тело { фоновая картинка: URL(bg1000.jpg); }}
@СМИ (мин-ширина:1601ПВ) и (Максимальная ширина: 1920ПВ) {тело { фоновая картинка: URL(bg1200.jpg); }}
@СМИ (мин-ширина:1921ПВ) и (Максимальная ширина: 2560ПВ) {тело { фоновая картинка: URL(bg1600.jpg); }}
@СМИ (мин-ширина:2561ПВ) {тело { фоновая картинка: URL(../Изображения / bg2400.jpg); }}
@СМИ (ориентация: портрет){
@СМИ (максимальная высота: 480ПВ) {тело { фоновая картинка: URL(bg480.jpg); }}
@СМИ (мин-высота:481ПВ) и (максимальная высота: 640ПВ) {тело { фоновая картинка: URL(bg640.jpg); }}
@СМИ (мин-высота:641ПВ) и (максимальная высота: 800ПВ) {тело { фоновая картинка: URL(bg800.jpg); }}
@СМИ (мин-высота:801ПВ) и (максимальная высота: 1000ПВ) {тело { фоновая картинка: URL(bg1000.jpg); }}
@СМИ (мин-высота:1001ПВ) и (максимальная высота: 1200ПВ) {тело { фоновая картинка: URL(bg1200.jpg); }}
@СМИ (мин-высота:1201ПВ) и (максимальная высота: 1600ПВ) {тело { фоновая картинка: URL(bg1600.jpg); }}
@СМИ (мин-высота:1601ПВ) {тело { фоновая картинка: URL(bg2400.jpg); }}
} Нашел это полезно? Пожалуйста, дайте нам знать, понижая комментарий ниже. Если вы хотите подписаться, пожалуйста, используйте ссылку подписки в меню в правом верхнем углу. Вы также можете поделиться этим с друзьями, используя ссылки ниже. ура.
Джон Скайф на Замена BT Бесконечность SmartHub с pfsense: “Спасибо за дополнительную информацию. Я действительно включил пакеты ICMPv6, но, должно быть, забыл, что у меня было, когда я…”
оставьте ответ