How to create a responsive design?

Question

CMS

Explain to the teapot how to create a responsive website. I have created a site template for a laptop under the extension 1920x1200. But what to do next ---
a) render this design for each device? (smartphone, tablet, laptop, PC)
b) Render for each extension ? but how many such extensions?
c) Use frameworks? But which ones and how do they work?

Answer 1

The meaning of responsive design is in media queries
Since there are dozens of devices, writing responsive design for each class is an empty job, because the styles will be mostly the same.
In this regard, they came up with a column design that pre-sets styles for the so-called. columns that line up in a row - if there is space, and in a column if there is no space.
This works either with inline blocks or floats.
If the blocks are inline, the parent element needs to constantly set the font size to zero. And in the column to return it back. Pluses - you can align the columns to the center if necessary (rarely needed in fact, more often they create a second container with indents).
If floats - hang on the parent element clearfix. And of course, center alignment.THE SPEAKERS THEM WILL NOT BE AVAILABLE . Besides - work with float: left; is very specific in terms of inheriting the maximum height, for example, when you want to make an input form in which there is a label in one column and a field in the other, while the form should look even - you set the line min-height: 30px for example, and then try with a grid inherit this min-height: will break your mesh to hell.
The meaning of the grid as a whole is this: you set the maximum number of columns per line, and then the size of a particular column relative to the maximum for a particular device. All classes are pre-written in media queries, the easiest way to do this is to use some SASS or Stylus (the main thing is to have cycles)

>> БЭМ
.grid.grid_size_12
  .grid_col.grid__col_size_2.grid__col_size_4mobile

The above code works something like this - by default, 12x is placed in a row, inside there is a column that by default occupies 2/12 = 1/6 of the screen, on mobile 4/12 - 1/3 of the screen in width.
You can use Bootstrap for this, but you will break your leg about the fact that bootstrap loves to create classes without prefixes, which you can often use in your projects - nonsense will start that the class has already been declared and "let's come up with a different name", plus bootstrap sinned before rewriting global styles for headings, buttons, paragraphs, etc., I don't know now.
Write your own grid, it's not that difficult, and then you can set column indents like this

.grid {
  display: block;
  font-size: 0;
  box-sizing: border-box;
  min-height: inherit;
  max-height: inherit;
  height: 100%;
}

/* здесь не нужна вложенность, на класс будут навешиваться другие классы */
/* мы указываем "начинается с класса", чтобы каждый раз не писать .grid__col.grid__col_size_2 а просто писать grid__col2 например */
[class^="grid__col"] {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem; /* постоянно следите за этим размером шрифта, он еще не один раз напомнит о себе */
  box-sizing: inherit;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
}

/* циклы */
.grid_col_size_12 .grid__col_size_12 {
  width: 100%;
}
.grid_col_size_12 .grid__col_size_6 {
  width: 50%;
}
/* и т.д. */

.grid_project_foo {
  margin: 0 -8px -16px;
}

.grid_project_foo .grid__col {
  padding: 0 8px;
  margin-bottom: 16px;
}

Which will give you a 16px horizontal padding between columns without padding the outermost columns, as well as a vertical padding of 16px after they are stacked, not including the last line (it will be eaten up by the negative margin).
Just checked columns with float: left. Min-height breaks them - they no longer fit in width, and if you remove min-height: - height alignment will not work. And the reason is that a negative margin breaks all floats to hell. So yes, the only sane option is inline-block.
If you need to color columns - use table, table-cell, which on mobile devices (after rebuilding to a column) will turn into block, inline-block.

Answer 2

If for good, then it all depends on how many control points you have.
Let's say the minimum width of the site is 320px, so the initial layout will be 320px wide. The first breakpoint is at 768px wide, so the second layout will be 720px wide, so the last breakpoint we have will be 1024px, so the last layout will be 1024px.

Answer 3

Option B - getbootstrap.com (in Russian http://bootstrap-3.ru)
of course you will need to edit the media for yourself

Answer 4

Responsive and mobile design with CSS3 Media Queries

Answer 5

In any case, you will have to draw for popular devices and work out the UI, even with a bootstrap you should understand how everything will look on small screens.