How to download mobile/desktop version of css (choose one)?

N

Nikita Panuhin2018-06-13 19:41:39

css

Nikita Panuhin, 2018-06-13 19:41:39

Please tell me how to fix this situation:
At the beginning of the page loading (html), you need to choose: a mobile device, or not (the width of the screen will be enough). Then download the appropriate css file. Here's how I did it:

<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>

But then I looked into the "download history" of Firefox:

And it shows that both files are being downloaded => user traffic is wasted . (bad) Can you please tell me
how to avoid this and load only the required file ?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Andrew Popov, 2018-06-13
@npanuhin

Media queries cannot be done, since the browser loads all the styles, but already applies them in place. In general, it is good practice to use the backend to determine from which device the request came from and substitute the appropriate style, but in this case there is a risk of loading the wrong style file. To operate exactly with the width, it is only in js to write a script directly into the head that will friend this or that file.

I

Ice, 2018-06-13
@IceRD

Specifies media= "only screen and ..." and for mobile version media= "handheld"
In your case, say

all and (max-width:750px)

download for everyone and for those who have a screen size.
In general, do not complicate your work, add 2KV media to the general css