Hello! I work on my first adaptive, I don’t know many nuances yet.

The question is: how appropriate is it to use the display property with a value of none? For example: caps for 320px and 1024px screens are completely different. I made 2 header blocks with appropriate markup and styles: by default, the cap for 320px is hidden with display: none and displayed only with the corresponding media query (and the cap for 1024px, respectively, is hidden by the same property).

Is it done in general or do you need to go in other ways?

I know that JS can be used for these purposes, but the question is relevant.

    2 answers 2

    Of course, if something is fundamentally different on mobs and desktops, then this is not a bad way out. Personally, I do that.

    • Thank! Does the loading speed have any effect? - uncle acid
    • @ uncleacid Affects. But it is impossible to say significantly or not without a code, but they will not tell you here. You will not bring here the whole project. And in any case, it is necessary to take and measure how significant this influence is to yourself. - Vadim Ovchinnikov

    That is, it turns out that in the html markup there are two headers at the same time, only one of them is turned off? In general, this is not done, since html is loaded to css and it turns out that you have a whole extra block loaded, and this affects the loading time of the site - consequently on its seo. It is better to create media queries in css for certain sizes and to switch off unnecessary elements with them. And do not duplicate the caps.

    • Yes, there are two caps in the markup. The designer, of course, needs to be torn off his hands for this: if you don’t know that this design is for two different resolutions, you won’t understand. It looks, roughly speaking, as two different sites, except that the color scheme is one. Thanks for the answer! - uncle acid
    • An extra couple of kilobytes of weather will not do much, the main thing is not to get involved. - Eugene Sukhodolskiy
    • Don't repeat your self - Denisoed