With what permission to start typesetting?

Question

css

Hello.
I have a laptop. With a resolution of 1366x768.
When laying out the layout at this resolution, the site is displayed in all browsers in accordance with the layout, i.e. Pixel perfect.
All projects are challenging! those. you can’t make any grid, a lot of elements with absolute positioning.
I write media queries (CEP) for mobile devices, but I ran into a problem with large monitors.
Those. once again, for a laptop with a resolution of 1366x786 and for mobile devices everything turns out to be Pixel Perfect as in the design layout, but at high resolutions the blocks begin to spread.
Questions:
1. What is the right resolution to start typesetting?
2. Should I buy a large monitor for these purposes?
3. How is the correct scaling of elements on the page for large monitors (pictures, font, block size) done? Can you show me an example where this has already been implemented?
PS tell me the media query for large monitors and the site for the entire width of the page , as I understand it max-width: 1150px; won't fit here.

Answer 1

There is a feeling that in this situation some of the designer's problems are shifted to the layout designer.
If the behavior of blocks at high resolution is not thought out and defined (if not by separate layouts, then at least by a verbal description) - why shouldn't they spread?
By designer, I mean here not necessarily a separate individual, but a role in the development process (sometimes a designer and layout designer are combined in one person).

Answer 2

1. Mobile First (mobile first).
2. A large monitor 1920x1200 is desirable (I recommend Dell)
3. A wrapper is made with the parameter max-width. At super-large resolutions, the site does not move around, but remains the right size as in the layout.

set of elements with absolute positioning

It is not necessary to do so.

Answer 3

Absolute positioning? Are you seriously?

Answer 4

1. Start with 960, everything else will come with experience.
2. You can not buy.
3. You don't need it yet. Make everything readable on 960.

Answer 5

1024 x 768 is the css size of the ipad screen

Answer 6

media and (min-width: 1150px) - This will mean "screens from 1150".
And you don’t need to make a rubber layout, nothing will fly apart. If the client really wants a site for both large and small screens, make the width 960, and if the screen is larger than 1150, make the width 1150, in any case, no one makes a width larger than 1200, so your monitor can handle it just fine. That is, do not make blocks 100% wide, if you need to set a background, you make such a block, and inside it another one, 960 wide, set margin: 0 auto; and it will be in the center

Answer 7

1. Buy a large monitor MANDATORY, and connect it as the main one.
2. Absolute positioning in more than 5 elements on the page is either you're wrong layout, or the designer is an idiot.
3. Measure the width of the layout along the guides in the photo editor, this will be the max-width of your sitewrapper-container limiter, which in any possible situation will prevent the design from creeping into the line-what.

.sitewrapper{ //контейнер-обертка для всего сайта. 
  max-width:1330px; // например такая ширина
  position:relative; //обязательно 
  margin: 0 auto; //всегда сайт будет располагаться посредине. 
  padding: 0 15px;
}

<section class="article-section regular-section">
        <div class="sitewrapper">
                                   <div class="classname"></div>
</section>		</div>

Answer 8

1. What is the right resolution to start typesetting?

From anyone. The main thing is to imagine when laying out how it will adapt in the future.
Not at all necessary. There is a browser scale as a last resort.
Scaling (increasing the size) is not usually done. Unless it's specified in the assignment.

Answer 9

cr41247.tmweb.ru now I'm making a website, the main page is perfectly displayed on monitors, I'm not making mobile mods yet.
But here is the cr41247.tmweb.ru/about.html page , you can see how much empty space there is on the page, with a resolution > 1440px, a less readable text starts (do not look at the block with pictures, because I made it up wrong, I confess), so I I had to take a media query and set the resolution to min-width: 1919px; and for each element of this page, select the font in EM, the size of the pictures in EM, the size of the blocks, headings, so that it looks the same as on the laptop screen.

Answer 10

if the blocks are spreading on large monitors, then set body {max-width: 1920px;}
then everything will be at high resolutions with a bunch, or set (if you use bootstrap) one parent container with parameters width: 100%; max-width: the maximum resolution for which the site is rendered (usually 1920px)