Responsive layout with CSS

Question

css

Hello sages!

I'm just setting up a static site for myself without any jquery, javascript (of all languages ​​​​I know assembler, but it seems to be a bit unsuitable for sites) and then I heard about adaptive layout. And it is done using CSS like:

@media screen and (max-width: 980px) { /**/ }

1. I just want IE678 to ignore these settings and use styles for 980px+ resolution. Are these CSS tools suitable for this? Or do you need crutches? In what order should the rules be specified in this case?

2. What resolutions should generally be used? It is clear that 980px + is a standard PC, but what should I indicate for mobile devices? Making one column for resolution less than 980px is kind of ridiculous... maybe?

3. What about retina displays? Do they just count one pixel as four? Or do you need a crutch too?

I'll be grateful for your answers ;)

Answer 1

If this is your first experience with responsive layout, then you should use responsive CSS frameworks. This is the easiest way to deal with Media Queries and other subtleties of "responsive" web design.

Answer 2

Go through the book by Ethan Marcotte "Responsive Design" : it is written as a manual in which the author turns a normal site into a responsive one through text and touches on compatibility issues, etc.

Answer 3

1. you won’t need to write anything special for this, it max-widthdoesn’t work in 6.7, and everything that doesn’t work is ignored;) in 8 it seems to work but only with px
2. If we are talking about the most popular, then 320, 480, 768 1024, but this is a purely individual thing and you need to look at how the layout will look also in intermediate resolutions, but in general you can’t describe it in a nutshell here is a good article on this topic: mobile.smashingmagazine.com/2012/10/24/beyond-common -media-query-breakpoints/
3. I advise you to look at www.youtube.com/watch?v=n0Vy9cYES-4 I think there will be no questions after

Answer 4

> 1. I just want IE678 to ignore these settings and use styles for 980px+ resolution. Are these CSS tools suitable for this?
caniuse.com/css-mediaqueries - IE 6-8 don't support CSS media queries, so they will likely ignore them. To do this, you do not need to add a single line of code :) Accordingly, in Media Queries, you need to include conditions for small screens, and without them - for large ones.
> What permissions generally should be used?
IMHO, only 2 resolutions: large screen and small. Also, if you want the iPhone to use styles for a small screen, and not imitate a large browser, you need to add a meta viewport something there.
In general, in my opinion this adaptive design is not very necessary. Maybe a user of a mobile device wants to fully view all the materials of the site, and you leave him only a block with content. Also, if you are making a mobile version, you need to somehow reduce the images for it on the server (reducing huge images using the browser looks like bydlokoding).
That is, the use of hell. design requires extra effort from the designer, layout designer, programmer, you need to test all pages in 2 resolutions, but for what? Unclear. I have a feeling that some people have heard somewhere that it is fashionable, but why it is done and at what cost, they do not understand.