What to make the width of the site?

Question

css

Good afternoon. For the purpose of training, I undertook to typeset the layout. The sizes are fixed.
As a result, I ran into some problems (which is logical):
The layout is sized to a width of 1280px. I have made all containers of this size. During the test, it turned out horizontal scrolling. During the clarifications, I realized that with a window size of 1280, the size of the side scroll bar is taken into account and the site turns out to be longer by its length.
What to do in this case?
A friend of mine told me that the sizes for sites with adaptive are based on 3-4 main sizes - 768, 992 and 1200.
There was an idea to adjust everything proportionally to 1200 ... But is this the correct conclusion if the layout is under 1280. Maybe there is a more logical and applicable method in layout?

Answer 1

Who drew the layout? Was there a requirement in the terms of reference for layout to make an adaptive design?
A professional understands that a layout under 1280px should have a smaller width (for example, 1200px), just because of the scrollbar.
In addition, ideally, there should be several layouts for responsive design.
Responsive != rubber.
Responsive only means that you have multiple sets of styles for different resolutions. But these are some rigid options with a specific width.
For example, the well-known adaptive layout framework Bootstrap uses the following threshold values:
1. < 768px
2. < 992px (>=768px)
3. < 1200px (>=99px)
4. > =
1200px clear dimensions.
The standard bootstrap container has the following widths:
1. no width
2. 750px
3. 970px
4. 1170px

Answer 2

Maybe it meant max-weight 1280 ?

Answer 3

If you do adaptive layout, then you need to take into account the dimensions of at least 4h screens (less than 420, up to 768, up to 992 and more than 1200). all containers by default should have a css property box-sizing: border-box;and be nested .container>.row>.block where container = width:100%, row = width relative to current media query (e.g. 992px) and mergin-left: auto; mergin-right:auto;
for .row write something like this

@media only screen and (max-width: 420px) {
 .row {
  width:419px;
 }
}
@media only screen and (max-width: 768px) {
 .row {
  width:766px;
 }
}
@media only screen and (max-width: 992px) {
 .row {
  width:991px;
 }
}
@media only screen and (min-width: 1200px) {
 .row {
  width:1280px;
 }
}

In general, if you are only puzzled by adaptive layout, then I advise you to immediately start by learning the bootstrap framework , which will simplify your work at times. (Well, or use other alternative css frameworks)

Answer 4

There are basic dimensions that can be conditionally called
Smartphone 320+
Tablet in portrait orientation 768+
Tablet in landscape orientation (netbook) ~980+
Desktop (laptop) 1200
Then it all depends on the design, which in turn depends on the goals of the project. I had a project where the last breakpoint was 1600 for example.
Everything is quite simple: after each conceived breakpoint, the styles of the elements change, offering the optimal interface for the current screen size.
It is logical that the content width of 1280px is optimal for screens with a resolution of 1366px or more in width.
Development of an adaptive interface is the task of the designer.
Many customers here are trying to save money by ordering a static layout (in which it’s a miracle if there is still a grid), and then they give the layout designer something to adapt from iPhone to TV. The output in this case is something on crutches.

Answer 5

We in the studio are used to making layouts for two resolutions:
-320
-768
At the same time, the width of the original layout can be any.
...but there are exceptions
. For example, we made a layout for 1400 px. There will be obvious problems with adaptability if you drag from 1400 to 768 px. Here it will already be necessary to add an intermediate one: 1200 or 1170. The typesetter himself will reach 992 if, of course, he typesets normally.