Moving on—planning for our media queries
You may have noticed that when you made your browser window very narrow, it made the site look tiny, and you couldn't read any of the text or see any of the images. If you didn't, give it a try! I'm sure you'll agree that this isn't ideal.
Media queries let us define screen widths using which we define layout styling changes and any other changes we want, to make the site easier to read and interact with smaller screens. So let's have a go.
Identifying our breakpoints
Before we can set any media queries, we need to know what the widths are of the devices that people will be using to visit our site. The most common devices to target are mobile phones, but we're going to be a bit more adventurous and target iPads and other tablets as well.
The devices along with their screen widths are as follows:
iPads in landscape mode (and on smaller desktop screens)—1024px
iPads in portrait mode—768px
Smartphones in landscape mode—480px
Smartphones in portrait mode—320px...
