Задать вопрос
npanuhin
@npanuhin
javascript

Как загрузить мобильную/Desktop-ную версии css (выбрать одну)?

Подскажите, пожалуйста, как исправить такую ситуацию:

В начале загрузки страницы (html) нужно выбрать: мобильное устройство, или нет (по ширене экрана будет достаточно). Затем загрузить соответствующий css фаил. Вот как делал я:

<head>
	<link rel='stylesheet' type='text/css' href='m.Main.css' media="all and (max-width:750px)"/>
	<link rel='stylesheet' type='text/css' href='Main.css' media="all and (min-width:751px)"/>
</head>


Но далее посмотрел в "историю загрузки" Firefox:

5b21488a8c368563718316.jpeg

И там видно, что загружаются оба файла => тратится трафик пользователя. (плохо)

Подскажите, пожалуйста, как этого избежать и загрузить только нужный фаил?
  • Вопрос задан
  • 285 просмотров
3 комментария
Подписаться 2 Средний 3 комментария
Решения вопроса 1
KPEATuBHO
@KPEATuBHO
Full-stack world-wide developer
Медиа-запросами не сделать, так как браузер грузит все стили, но уже применяет по месту. Вообще хороший тон средствами бэкенда определять с какого устройства пришел запрос и подставить соответствующий стиль, но в таком случае есть риск загрузить не тот файл стилей. Чтобы оперировать именно шириной, это только на js написать прямо в хед скрипт который подругзит тот или иной файл.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
IceRD
@IceRD
Указывается media= "only screen and ..." а для мобильной версии media= "handheld"
В вашем случае говорите
all and (max-width:750px)
загрузить для всех и для тех у кого экран с размером.

Вообще, не усложняйте себе работу, добавьте 2КВ media в общий сss
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать 10 экранов на react
26 дек. 2024, в 07:40
8000 руб./за проект
Разработать скрипт для взаимодействия файла Ворд и таблицы Эксель
26 дек. 2024, в 07:38
2000 руб./за проект
Разработка Roguelike-игры на Unity для Android
26 дек. 2024, в 01:11
120000 руб./за проект
Ещё заказы