I have set a new media width: Large screens at 1200px but it’s not w working as expected. Is this because my default width is still at 960px and all other device wide he should be smaller than the default?
On a 960 “width” page, I set breakpoints at 1440px, 1024px 768px, and
480px. Then I set five inline divs-- one for each breakpoint-- then set the
background colors to change for each breakpoint. The result was the
“default” div was colored only at widths larger than 1440px-- which was the
largest setting. All the other breakpoints worked as expected.
So I think the logic of it is, yes-- the default breakpoint should be the
widest your page will be set to. Then, plan downwards in terms of width.
So I’m honestly not really sure why a breakpoint way above is necessary.
1440px is generally, functionally, laptop screen width. If you wish to make
some distinction between desktop users who use their browsers at wider
widths and portable users at their widest widths, I suppose. If you are
Breakpoints-- though-- are also the points at which your design will
“break” so not just device targets. A good inflow layout should be fluid
and flexible, but may need help at odd widths. I did this sample on html
blockquotes a while ago-- I will likely redo to fit my site design, but it
has breakpoints at 1800 and 1200px… http://cssway.thebigerns.com/workbench/blockquote/
Both are targeting desktop users but with different browser habits, maybe.
I find this myself with my 27-in iMac, always adjusting my browser to width
to fit my work habits.