Style css, media w oddzielnym pliku

pytanie zadane 10 maja 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

Co wpisać w media="" aby te style sie uruchomil gdy @media (max-width: 767px)
<link rel="stylesheet" media="???" href="style/mobile.css"/>

chce miec @media w oddzielnym pliku

2 odpowiedzi

odpowiedź 10 maja 2017 przez Shaoi Mądrala (7,020 p.)
wybrane 10 maja 2017 przez Vorex444

Najlepsza

<link rel="stylesheet" href="css/style_1.css">
<link rel="stylesheet" href="css/style_2.css" media="screen and (max-width: 767px)">

komentarz 10 maja 2017 przez Vorex444 Dyskutant (9,610 p.)

no wlaśnie nie czaje bazy dlaczego mi to nie działa

komentarz 10 maja 2017 przez Vorex444 Dyskutant (9,610 p.)

dobra działa

odpowiedź 10 maja 2017 przez Comandeer Guru (601,930 p.)

Z tym, że w takim przypadku odwrotne podejście byłoby o wiele lepsze. Przy Twoim kodzie urządzenia z małym ekranem będą pobierać 2 arkusze stylów przed renderowaniem, co jedynie opóźni proces (ratować by się można przy pomocy server pusha). Przy podejściu content first (mobile first) style dla małych ekranów wczytają się przy jednym arkuszu, a dopiero przy większym ekranie (i prawdopodobnie lepszym necie i większej mocy obliczeniowej) zaczytają się 2 arkusze przed renderowaniem.

komentarz 10 maja 2017 przez Vorex444 Dyskutant (9,610 p.)

nie umiem jeszce tego server pusha, wiec radzisz zeby w moim przypadku wszystko zrobic w jednym pliku css?

komentarz 10 maja 2017 przez Vorex444 Dyskutant (9,610 p.)

ale dla elementów przeznaczonych dla wiekszych ekranow w cssie dla mobile daje display none wiec nie zaladuja sie

komentarz 10 maja 2017 przez Comandeer Guru (601,930 p.)

nie umiem jeszce tego server pusha, wiec radzisz zeby w moim przypadku wszystko zrobic w jednym pliku css?

Radzę odwrócić podejście i poczytać o content/mobile first. Ale w sumie tak, najbardziej wydajne będzie posiadanie jednego arkusza stylów.

ale dla elementów przeznaczonych dla wiekszych ekranow w cssie dla mobile daje display none wiec nie zaladuja sie

Ale to nic nie zmienia, bo telefon najpierw musi pobrać ten arkusz dla dużych ekranów, przetworzyć go, pobrać arkusz przeznaczony dla małych ekranów (czyli dla siebie), a dopiero potem może wyrenderować stronę.

komentarz 10 maja 2017 przez Vorex444 Dyskutant (9,610 p.)

ok, dzięki wielkie za informację, poczytam o content/mobile first

komentarz 10 maja 2017 przez Shaoi Mądrala (7,020 p.)

Chodzi tutaj o to:

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 1280px)">

Podałem Ci odwrotny przykład, ponieważ takiego chciałeś. Jednak faktycznie lepszym rozwiązaniem jest to wyżej, aby dla ekranów o malej rozdzielczości nie ładować nigdy styli, które przeznaczone są dla ekranów z większą rozdzielczością.

komentarz 10 maja 2017 przez Comandeer Guru (601,930 p.)

Tak, o coś takiego mi chodzi.

Tylko jedno jeszcze trzeba dopowiedzieć: te style i tak zostaną najprawdopodobniej pobrane – ale dopiero później, gdy przeglądarka będzie "odpoczywać", co nie opóźni wczytywania strony.