Tip:
Highlight text to annotate it
X
Media queries have a somewhat confusing syntax
so we need to sort out the parts of the syntax that are important to mobile
first responsive
design. Then we will use the CSS media query selector and apply media queries
to our practice file
to create a mobile-first responsive design approach.
This is our practice file opened in an editor.
You see we already have the meta tag for the viewport added in
and we have the base styles and selectors added in as document level CSS.
Media queries can be added and using the CSS
@media query selector. The @media selector's basic job is to create a test
and one of the tests is for the type of media. There are various types.
The one will be using is for the screen. Media queries are a test so they contain
some logic operators
these are the list you have "and" and "comma" and "not" and "only".
The comma is a separated list. And so we will be using
the "only" one so that we can support legacy browsers that will ignore
applying our media queries without running the actual test.
Once you have detected the media type you can then
test for features for that media type. The media features you can use depend on
the media type that you selected.
They may apply to more than one media type or they may be restricted to a
specific
media type. To use the media feature you use its name.
Some can be prefixed with the min dash or a max dash
to express greater than or equal to or less than or equal to
constraints. Then you follow the name with a colon
and then something to express a value. The values can be
a simple number or they can be a keyword.
They can be a number with the measurement value
or they can be something unusual such as aspect ratio has two numbers separated
by a
slash. And some can just use the name of the keyword
to detect if it exists for our example will be testing for the minimum width so
we use the
width feature prefix with the min dash. And then a number of pixels for the
screen width were looking for.
We need to include parentheses around the
feature name value pairs. And then finally
we need to connect this with our media only screen with
the logic "and" keyword. And then we have our first media query.
To save some time typing we have the snippets.txt file that has the
code if we want to use. And lines 6 through 11 has our first
media query selector. So we will copy that.
Then go over to the practice file and paste that in at the
of the styles. And you can see we have
some comments here to give us an idea what the media query is about.
And media queries when you're using
the @media selector require some curly braces to define a block. And in that block
will put in additional selectors to either override
or add to the current CSS. So the first one we're going to do we can copy from
the snippets file.
And that is on line 15, the body selector.
And we have a background color we're going to override the existing
background color.
So paste that here on line 42.
Now we can go over to Firefox and observe the
change. And so we will refresh the window
And we can see that our color has been applied to the background.
And if we look at this in the Firefox responsive design view.
And we'll go over to the preset for 320.
and refresh the page. We can see that our colors applied and if we nudge
the width a little bit, we can see that there's a change at 320 pixels.
And that will continue as far out as we can go
with the current screen. A quick look at the
CSS again you can see that the base body
background property was set on line 16. And then the media query that follows
that
overrides the body background property when the minimum width
of the screen is detected to be 320 or greater.
Now we can add in our next media query selector for
our next width. So we will go over to the snippets file will see that we have that
setup for 768.
Ao that's lines 18 through 22. We will copy those.
Back in the practice file we will add that after our
first media query selector. And also change the body background and we
can copy that from snippets file from line 26.
And we will put that on line 47
in the practice file.
If we go back into Firefox we can refresh the page.
And then we can take a look at some different presets. We will go up to the 768
preset. And we can see that the background color changed.
If we take the handle on the right hand side just nudge it down a bit, we can see
that's our break point.
You see the different properties being set as we reduce
the width down to 320 and below.
Now we can add the last breakpoint. So over in the snippets file
if we look at lines 30 through
34 we have the last break point. Copy that and put it into practice file at the
bottom
and we see as we go up the screen sizes we keep
overriding previous property settings and so again what does to the body so we
can see the actual CSS work
happening. So we go back over the snippets file line 37 copy the body
selector
paste that on line 52 of the practice file.
And we will go over to Firefox to the responsive view.
We refresh the page and we'll take a look at some presets. There's
320 by 480. And then we go to 768 by 1024 we see a color change
for the background and then our last one we could probably pick
1280 by 600 and we now see the
reddish color background. And if we drag the
handle on the right hand side down as we had these various break points we can
actually see the
background color changing until get all the way back to the base
background color.
Using media queries to change the background color
is interesting but not likely what will mostly do
when we're designing for responsive design.
Typically we will change the styling of our documents so that it's best suited for
the user
using their device. So we'll start off with the header h1 selector which
is by default on a base has a small font size.
And we will boost up for our first media query.
So we have the work done for in the snippets file. So if we over there
lines 41 through 45 have a
header h1 selector. And we are improving the font size and adjusting the height
and line width properties. So copy those we will go over the practice file
and paste those on line 43 just below the
body selector for the first media query. Back in Firefox we will refresh the page.
And we can see now we're providing a little bit larger
font size for the top of the document.
And will repeat that for the text that's inside the document.
So back in the practice file we see we have selectors for section, section h2
and section p.
Basically working with the margin padding and font sizes.
So we go over the snippets area we have some overrides for those
starting on line 49 through
59 to override the padding font sizes
and even add some color changes. So we will copy those.
Go over to the practice file and we insert those at line 43
right after the body selector in our first media query.
Now we will go back over to Firefox
and in our preset for 320 by 480 will do a refresh.
And we can see that the text has a
larger size and has been changed to black.
Let's repeat that for our second media query so when the snippets file
select lines 63 through
73: includes some changes both for the header and the section selectors.
And we will copy those and go back over the practice file
and in the second media query
on line 64 we can paste those. And keep in mind these are overriding the
previous
media queries so we have some matches here.
For example the h2 is matching the font size and making an override.
But also what's happening is the padding for example in the section
selector is carrying forward into this media query.
So it's progressively adding to our
selectors as we go up the media query selectors.
So back in Firefox let's look at responsive view
for our media query. That would be 768 by
1024. And then we will refresh the page.
And you can see the improvement with the new styles that we added for this
break point.
Now let's move on to our last break point for laptops and desktops.
And let's do this in two steps. We will first go to the snippets file
and just do an adjustment for the
header. So those are on line 77 through 81.
Copy those and we will add those to
the media query for that size. And in Firefox we will select a width for that media
query. I think we can use
1280. And then we will refresh the page.
And we can see we increased header font and a little bit of the spacing around
it.
So the last thing will do is prevent the paragraph text from
unwrapping as we get to wider and wider widths.
so just to revisit that you can see it wraps as we shrink.
And as we get into our last media query keeps unwrapping and unwrapping and
unwrapping
until finally we might get on the large monitor a
very unpleasant look of one long sentence. So this is less a
technical item and more a design item based on the
content expectations of our page. So we're going to make some assumptions.
Soo we go over to the snippets area our last
snippet is for the section to
set a maximum width of the section selector
to 1200 pixels and adjust the padding slightly.
And we copy that and we go over to our last media query
on line 85. We will paste that in.
And so once we hit 1024
we all set a max width for the section.
And in Firefox we can try that out so refresh the page and you can see that
we're already in that particular breakpoint and the
text now is holding at 1200 pixels.
If we move further towards 1200 pixels
will start to see the wrapping occur. And if we move further out
it's on wrapping and once we hit 1200 the unwrapping
comes to an end. So it does not matter how wide the monitor might be
should look fine. Now you have a basic framework for a mobile first responsive
design.
The actual width breakpoints will depend on your targets.
For widths between the breakpoints you use a flexible design approach.
The CSS media queries selector is a great way to explore screen width
deetection, but they do make you concentrate all the CSS
in one place. So in an upcoming segment
we look at breaking the CSS into separate external files for each
breakpoint then we can apply the same media queries
to the HTML link tag as an alternative to using the CSS
media selector