All geek questions in one place

Do I have to write media queries for each screen size on which my site can be viewed, or is there an alternative?

I am a junior front-end developer and have just begun to learn responsive design. Although the thought of media inquiries excited me, what happens when you don't have enough milestones?

For the most part, you can assume that someone has an iPhone or iPad, but what about other tablets and mobile phones and different Mac / PC screen sizes? It will be a crazy task to write media queries for each screen size.

So, is there any other way to do responsive design without media queries? Or didn’t I understand how to use media queries?

+4
source share
3 answers

I am not sure what alternative you are looking for. Responsive Design means “environmentally friendly design”. To do this, you need something that allows you to say "if the environment is X, make Y." What media queries do.

It will be a crazy task to write media queries for each screen size.

It would be! This is not an idea. The web does not work like that. HTML and its layout system are designed, as far as possible, for viewing on almost any device that uses all kinds of programs (web browser, screen reader, braille, search robot, etc.).

For example: by default, block-level elements occupy as much horizontal space as is available. You do not need to write a media query for every possible screen size to get them to do this, they just do it.

Breakpoints for your layout should be based more on the content being hosted than on the sizes of different devices. There are some good articles outlining the approach:

If you write new styles for each slightly different screen size, you are probably mistaken.

You can look at the screen sizes of popular devices to communicate your design decisions, but Wikipedia already lists them and will continue to do so in the future when new devices appear.

It’s not easy to make a design that works in many different viewports, but that’s not because of how media queries work. Its an urgent task.

+7
source

Just choose the break option that suits you (let's say 4), and then the code for those who have a fluid design so that your content expands to size until it moves to the next break and then moves to the next layout.

For example, if you choose width gaps of 320, 480, 800, and 1024, you can put a minimum width of 320 to stop content shrinking if a smaller device arrives (not sure). If the device has a width of 640, it uses 480 gaps and centers or uses fluid (CSS with dimensions of%, not px), and therefore the content expands to fill in the extra space.

In these examples, the latter, more than 1024, will be used (mainly desktop computers and higher specifications of the tablet / phone). In fact, this is the one that you will see most of the time when you develop.

+2
source

We use Adapt.js in our project, and it is perfect for us. We have four breakpoints: mobile, tablet, laptop and desktop.

We refused media requests because we have to support IE8 and do not want to communicate with policies for CSS3 functions. Check this.

http://adapt.960.gs/

0
source

Source: https://habr.com/ru/post/1492471/

More articles:


All Articles