Should I load different style files for different screens?

J

John Didact2021-07-11 08:37:49

css

John Didact, 2021-07-11 08:37:49

I want to do something like this:

<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.csscontains general rules;
sp.css- rules for smartphones;
pc.css- rules for campers.

On CodeRoad, I read in the comments that people would not do this, but he did not explain why. And, as far as I remember, gurus do not do this, they use import and media where there is not enough space for blocks. But why? Is it purely a religion, or are there any arguments (other than religion) in favor of the fact that it is undesirable to do so? Or was it undesirable to do this in the past, but now it's like the norm?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alex, 2021-07-11
@Kozack

If we are talking about the "Adaptive" design - then no, it's not worth it. If we are talking about a separate mobile site (when there are almost no common styles), then yes.
The problem is that the definition of "Smartphone" based on screen dimensions can be extremely inaccurate. There are big smartphones, smartphones can change orientation, smartphones have different modes of operation. The same applies to laptops. How do you tell a small laptop from a phablet or tablet?
There are a lot of device options. And don't forget that in many cases your site may not be displayed in full screen.

import and media are used where there is not enough space for blocks. But why

The idea is that you do not change the entire page, according to some pre-set points, but each individual component and according to its own sizes. That is, each component of the page can adapt individually and independently of the others. (Especially With the advent of Container Queries )
With this approach, from whatever device the user enters, he will see the most optimal page.