Я недавно обновляли свои веб-сайты и веб-сервер и добавить новый сайт (LoveCrete.org). Я хотел бы иметь фоновое изображение на LoveCrete и понял, что, конечно, 1 размер не подходит для всех экранов. Here is a summary of what my thinking was and what I did to cater for the numerous screen sizes and orientations.
Какая ориентация
Я начал с того, что составил себе столик со всеми распространенными резолюциями ПК и таблетки (в горизонтальной ориентации). Я решил сосредоточиться на этом, потому что большинство изображений доступны в альбомной ориентации, так что это разумное место для начала.
Я решил, что я буду размещать изображения по центру на странице, и в некоторых случаях края будут потеряны за краем экрана.. Когда телефон используется в портретной ориентации, он будет загружать изображение в зависимости от высоты (не ширина) и потеряет много как от края изображения. Выполнение этого любым другим способом означало бы необходимость обрезки изображений до совершенно другой формы или использование «мозаичного» изображения ландшафта на высоком экране., который не является желательным.
Соотношения максимального размера изображения в каждой группе были все вокруг 1.6 с несколько выше. Чтобы было проще, я решил использовать соотношение 16:10 для всех изображений и пришли с размерами, чтобы сделать соответственно.
Это означает, что в большинстве случаев изображение не будет идеально соответствовать размеру экрана, но все экраны получат что-то очень близкое, и ни один экран не окажется слишком маленьким. Это также означает, что исходное изображение может быть обрезано для 16:10 once and then multiple sizes easily created
группы разрешения Общие ландшафтные
| Высота | ширина | Изображение сделать | Комментарии | ||
|---|---|---|---|---|---|
| 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 monitors or multiple screens — there has to be a limit somewhere!
Так как CSS использует размер окна просмотра или браузера, а не размер экрана. Для горизонтальных экранов необходимо использовать ширину, а не высоту - так как в большинстве систем верх и низ теряют место для заголовков и т. д., в то время как ширина обычно максимизируется. Однако, для портретных дисплеев лучше использовать свойство высоты. Это может быть сделано как CSS can identify the screen orientation
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); }}
} Нашел это полезным? Пожалуйста, дайте нам знать, оставив комментарий ниже. Если вы хотите подписаться, используйте ссылку подписки в меню в правом верхнем углу.. Вы также можете поделиться этим со своими друзьями, используя приведенные ниже социальные ссылки.. Ура.
Джон Скэйф на Окна Иконки: Полный список с деталями, места & изображения: “Привет Вольфганг В этой статье есть только встроенные значки Windows. Так что, если на нем нет значков для чего-то, они не будут…”
оставьте ответ