I am writing adaptive in css without js, it turns out that the media request is at the end of the code and, when I set a new parameter to a class in a media request, the parameter changes at all breakpoint. that is, when I change the display from block to inline-block in a certain class, there is a change to ib in all breakpoints + overlaps the main code

  • What surprises you? It should be so. This is css. You can use! Important for properties that you do not want to change, but it is better to write code so that it does not come to apply. - Andrey Fedorov
  • and if I go from css to scss - will this change the situation? thank! - kporcelainluv
  • This is not another language, this is a postprocessor. I don’t know if he can change scopes, but if so, it means that he just cancels your changed styles below in the text of the compiled css. - Andrey Fedorov
  • 2
    It should not be like that. Either you didn’t fully describe the problem and you were misunderstood, or you don’t correctly write media queries. Give an example. - mJeevas
  • I agree. read the question, some kind of nonsense. maybe this development environment is dirty? Some editors like sublime can do this. - Andrey Fedorov

1 answer 1

Here's an example of the right media queries, though not for all permissions, add the necessary permissions yourself. Permissions in these media queries are taken from the bootstrap grid. You write the main styles in the style.css file style.css same styles for media queries to the media.css file. Media queries and media queries to interrupt your basic styles when the screen size on your device changes to the corresponding resolution in media queries.

 /*========== Desktop First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1199px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 991px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { }

For example, in the main style file you have a div with the class class the style is applied:

 .class { display: block; }

This style will be valid for all tags with a class class until, when the resolution is changed, the browser encounters a different style in a media query for a specific resolution, let's say this:

 @media only screen and (min-width : 992px) { .class { display: inline-block; } }

based on media queries, all tags with a class of class be assigned to display: inline-block; starting with a resolution of 992px, your basic style will act on resolutions below 992px. In order for styles to take effect before a certain resolution, you need to write them not in @media (min-width) , but in @media (max-width) .