I would like to start building the site that would be easily viewable on smart phone, tablets and laptops at the most. According to the table from below should i set my max-width to 1920px?
https://www.geek.com/laptop-screen-size-resolution/
Also the smallest width I am thinking will be iPhone 7 so min-width to 320px?
I will start building from 320 px and then use break points as the screen becomes bigger.
Can someone point if I am looking at this incorrectly please.
Thanks
Set your styles for the smaller screens in media queries at the end of the stylesheet.
But before them in the css file set the styles for the large screens.
The styles at the beginning of the css file are overridden by the media queries when the smaller screens are detected. So you donât need to define styles for larger screens at, say, 1400px, 1600px, 1920px, 3000px, as they will have all the earlier general rules applied anyway.
So you only set media queries styles that refer to the smaller screens.
Either approach will work, and depends to a great extent on personal preference. There are pros and cons to both approaches. There are plenty of articles around on the Internet which discuss this in more detail. For example: https://mayvendev.com/blog/mobilefirst
You are missing the most important vital ingredient and that is âwhat is the content that I need to displayâ?
If it is a text only site then clearly lines of text that stretch to 1920px in length will be virtually unreadable. If on the other hand it is a photographic type of site to show off images then a completely different approach would be needed.
Start with your content and the build from there. Not the other way around.
Forget about sizes and make your content work for any size and that may mean applying a max-width somewhere along the line but that will depend on your content and not on some imaginary âbest monitor size fitâ. The trend today is to be device agnostic as much as possible and build a site that works across them all. That does not mean that a site has to go edge to edge on every monitor and indeed many sites that do this are unreadable on my 27" mac system.
First and foremost take care of your content and make sure that it is readable and presentable at any width even if that means setting a max-width at 1280px simply because you donât want an unlimited number of columns.
Yes I would agree that its not worth going any smaller than 320px these days (unless you support the apple watch).
Note the iphone 7 is 375px width not 320px. (The iphone 4 - 6 are 320px width. )
.
[quote=âPaulOB, post:4, topic:285748, full:trueâ]
If it is a text only site then clearly lines of text that stretch to 1920px in length will be virtually unreadable. If on the other hand it is a photographic type of site to show off images [/quote]
It will be text and images
Why 1280px for max-width
Why not 960px?
It could be anything that suits that the design. I just plucked 1280px out of the air. It doesnât matter what it is as long as it suits the design criteria. It may well be that it could be anything from 800px upwards depending on the design. There are no limits as such 
It all depends on the design and how you cater for wider or smaller scenarios.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.