Задать вопрос
@JohnDidact
Нуб во всём
html

Стоит ли загружать разные файлы стилей для разных экранов?

Хочу сделать что-то типа того:
<head>
 <link rel="stylesheet" type="text/css" href="https://mysite.com/front/style/default/style.css">
 <style>
   @import url("https://mysite.com/front/style/default/sp.css") screen AND (min-width: 320px) AND (min-height: 450px);
   @import url("https://mysite.com/front/style/default/pc.css") screen AND (min-width: 800px) AND (min-height: 600px);
   @import url("https://mysite.com/front/style/default/palm.css") handheld, print;
 </style>
</head>


style.css содержит общие правила;
sp.css - правила для смартфонов;
pc.css - правила для кампуктеров.

На CodeRoad в комментах вычитал, что чел так бы не делал, но он не пояснил, почему. Да и, насколько я помню, гуру так не делают, import и media используют там, где места не хватает для блоков. Но почему? Это чисто религия или есть какие-то аргументы (кроме религии) в пользу того, что делать так нежелательно? Или нежелательно было делать это в прошлом, а сейчас типа норм?
  • Вопрос задан
  • 154 просмотра
4 комментария
Подписаться 2 Простой 4 комментария
Решения вопроса 1
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Если речь идёт именно про "Адаптивный" дизайн -- то нет, не стоит. Если речь идёт про отдельный мобильный сайт (когда общих стилей почти нет) тогда да.

Проблема в том, что определение "Смартфона" на основе размеров экрана может быть крайне не точным. Смартфоны есть большие, смартфоны умеют менять ориентацию, у смартфонов есть разные режимы работы. То же касается и ноутбуков. Как вы отличите маленький ноутбук от фаблета или планшета?
Вариантов устройств великое множество. И не забывайте, что во многих случаях ваш сайт может быть открыт не на весь экран.

import и media используют там, где места не хватает для блоков. Но почему

Идея в том, что вы изменяете не всю страницу, по каким-то заранее установленным точкам, а каждый отдельный компонент и по собственным размерам. То есть каждый компонент страницы умеет адаптироваться индивидуально и не зависимо от других. (Особенно С приходом Container Queries)

При таком подходе, с какого-бы устрйоства не зашел пользователь он увидит наиболее оптимальную страницу.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Ещё заказы