Any web designers, what do you think about this?
Example: Layout - Foundations - Human Interface Guidelines - Design - Apple Developer
Let’s start with a full page responsive (Hero) image with no padding or margins. Consider the 4- Breakpoints (Bootstrap 4) or the 4-Viewports. When designing this, what is the optimal Width & Height in pixels that should be used? How do you determine the Height? Is that not important?
Here is what I came with, please advise on any corrections.
DESKTOP - iMac 27" 2560 X 1600
LAPTOP - MacBook Pro 15 1680 X 1200
TABLET - Samsung 10" Tab 800 x 1280
MOBILE - iPhone 8 Plus 414 X 896
Here is the conclusions I found in my search. None of these give the height and I could not find what to use. Also the max-width does not consider a 4K Screen
Do we need to make another image and add @media query for a device when the viewer changes from Landscape to Portrait? How does Blocs handle this?
The Standard Bootstrap 4.x Breakpoints
@media all and (max-width: 1199px) { … }
@media all and (max-width: 991px) { … }
@media all and (max-width: 768px) { … }
@media all and (max-width: 575px) { … }
I appreciate anyone help in this matter. 