Я столкнулся с некоторыми проблемами в моем проекте. В настоящее время написано CSS выглядит так, как я хочу на мониторе 27 "2560x1440
Но изменение размера окна приводит к тому, что большинство элементов рушатся друг с другом, и возникает хаос.
Чтобы исправить это, я попытался изменить стиль, используя @media queries, например:
/*S device */
@media screen and (min-width: 576px) { ... }
/* M devices (tablets, 768px and up) */
@media screen and(min-width: 768px) { ... }
/* L devices (desktops, 992px and up) */
@media screen and (min-width: 992px) { ... }
/* XL devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) { ... }
Но этот подход вообще не учитывает высоту, и у него два fl aws (на моем project):
- , когда я изменяю ширину окна просмотра в меньшую пропорцию, а высота остается очень большой, появляется много пробелов, потому что элементы становятся крошечными;
- при изменении только высоты некоторые элементы разрушаются друг с другом.
Это нормально? Должен ли я беспокоиться о высоте и ширине порта просмотра?
Я уверен, что мне не нужно учитывать каждый размер порта представления, но я не знаю, какие точки прерывания запроса мне следует использовать.
Кроме того, один Другой вопрос, который возникает: это нормально, чтобы изменить размер каждого элемента , чтобы вместить каждый @media query? В основном пишу тонны похожего кода.
Стоит ли менять @media queries на разрешение экрана? Что-то вроде:
/*S device 576p*/
@media screen and (max-width: 720px) and (max-height: 576px) { ... }
/* M devices 720p */
@media screen and(max-width: 1280px) and (max-height: 720px) { ... }
/* L devices */
@media screen and (max-width: 1920px) and (max-height: 1080px) { ... }
/* XL devices*/
@media screen and (min-width: 1920px) and (min-height: 1080px) { ... }
Кроме того, что является лучшей практикой, создавайте разные css файлы для каждого @media query и обслуживайте их, добавляя что-то вроде <link rel='stylesheet' media='screen and (max-width: 720px), screen and (max-width: 576px)' href='css/small.css' /> в html head или оставить один css файл с сотнями строк кода? css для моего index.html имеет около 1000 строк.
Будут ли свойства transition работать от одного css файла к другому? Будет ли большой css файл влиять на время загрузки страницы или нет?
Я прошу прощения за все эти вопросы, но каждый блог, сайт и учебник говорят: сначала подумайте о мобильном потом копируем вставляет стандартные медиазапросы и все. Вот и все объяснения, найденные в Интернете.