Css media mobile first

Responsive Development using CSS Media Queries

Media queries are a technique of applying CSS styles only on certain screen sizes. This is helpful, and in many cases necessary when developing for multiple device types and manufacturers. There are many options for media query arguments, and for this tutorial we will see how min-width and max-width allow us to develop responsive websites. If you want to follow along in the editor, create a index.html file now to test the code in browser

!DOCTYPE> html> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Media Queriestitle> style> style> head> body> body> html>

Media Query Syntax

p  font-size: 20px; > @media (max-width: 1000px)  p  font-size: 14px; > >

• Also add a paragraph element inside the page body and drop the index.html file in the browser to test it out. Shrink the screen below or above 1000px to see the font-size change.

Media queries must be written after general selectors instead of before like in the example above. If we switched the order of these selectors the media query would get overwritten by the original paragraph styles.

Device Type

Media queries can also target device types such as screen , print , speech , and all with the following syntax

@media only screen and (max-width: 900px)  .content  width: 80%; > > @media only print and (max-width: 900px)  .content  width: 100%; > >

Since we will be primarily focused on writing code for screens, we can just use the @media rule without a media type specified (defaults to all ). For the rest of this tutorial we will be focused on min-width and max-width media queries. There are a ton of other properties we can applying our styles to. Here are some for reference

• min-width
• min-height
• max-width
• max-height
• device-width
• device-height
• min-device-width
• min-device-height
• max-device-width
• max-device-height
• device-aspect-ratio

Mobile First Setup

If you’ve been coding for any amount of time, you’ve probably heard the term “mobile-first”. Considering what the mobile code will look like early on is often a great way to avoid adding unnecessary CSS styles.

To setup mobile-first styles we will write our CSS for phones, and use media queries for larger devices. Here are the screen sizes we will want to cover with some typical pixel widths

Device/s	Min-width
Phone	N/A
Tablet Tall	600px
Tablet Wide	900px
Laptop/Desktop	1200px
Big Desktop	1500px

We can convert these values to media queries like so

.container  width: 90%; margin: 0 auto; color: black; > @media (min-width: 600px)  .container  width: 500px; color: green; > > @media (min-width: 900px)  .container  width: 840px; color: yellow; > > @media (min-width: 1200px)  .container  width: 1120px; color: red; > > @media (min-width: 1500px)  .container  width: 1360px; color: blue; > >

While this is surely a contrived example of how media queries work, you can test this code out by adding some lorem ipsum text into a .container element to see how the text resizes and changes colors at every breakpoint.

In this example, each successize @media rule overwrites the previous one so it is important to write them in the appropriate order.

Desktop First Setup

While mobile-first is great for letting us only worry about bigger screen than phones, desktop first has its advantages as well. Writing code desktop-first can be preferable for people who prefer writing for desktop web or making desktop apps. The setup is roughly similar and we will use the following widths as breakpoints

Device/s	Width Specified
Big Desktop	min-width: 1200px;
Laptop/Desktop	N/A
Tablet Wide	max-width: 1200px;
Tablet Tall	max-width: 900px;
Phone	max-width: 600px;

.container  width: 1000px; margin: 0 auto; color: black; > @media (max-width: 1200px)  .container  width: 840px; color: green; > > @media (max-width: 900px)  .container  width: 600px; color: yellow; > > @media (max-width: 600px)  .container  width: 90%; color: red; > > @media (min-width: 1500px)  .container  width: 1360px; color: blue; > >

The desktop-first example is different as it utilizes both max-width and min-width properties to support large desktops. In this case our max-width media queries will overwrite the previous ones. As long as the min-width big-desktop query is after the general styles it will also overrwrite them appropriately. Chosing whether to build for desktop-first or mobile-first is often a contentious issue, and can come down to personal preference if not otherwise required. While technically the exact same designs can be implemented using both, it is helpful to consider the layout for all devices in the beginning.

Responsive Development Tips

Responsive development has been a huge buzzword since media queries were introduced. This is not by chance, as media queries let us specify exact how we want to scale our content. Responsive development is about considering how your layout will scale across screen sizes.

Absolute vs Relative units

In the earlier examples we used both absolute (pixels) and relative (percent, viewport) units for our container width. specifying absolute values such as width will make our pages responsive ONLY at our media query breakpoints. By specifying relative values such as percentage or viewport, the browser will resize our elements every time the width changes, not just at the breakpoints. For example we could make a 16:9 fixed image responsive on smaller screen sizes

.responsive-img  width: 800px; height: 450px; > @media (max-width: 1200px)  .responsive-img  width: 80vw; height: 45vw; > >

Drop in an image like this one to test it out

img class="responsive-img" src="https://cdn.pixabay.com/photo/2016/11/13/21/46/sheep-1822137_1280.jpg" />

Conclusion

Media queries are one of the most foundational CSS techniques for development. Since users could be browsing on a huge variety of screen sizes, we can use them to ensure our layout always looks good.

Источник

Responsive Web Design — Media Queries

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example

If the browser window is 600px or smaller, the background color will be lightblue:

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Desktop

Phone

Use a media query to add a breakpoint at 768px:

Example

When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:

@media only screen and (max-width: 768px) /* For mobile phones: */
[class*=»col-«] width: 100%;
>
>

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Example

/* For mobile phones: */
[class*=»col-«] width: 100%;
>

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

Desktop

Tablet

Phone

We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px):

Example

Note that the two sets of classes are almost identical, the only difference is the name ( col- and col-s- ):

/* For mobile phones: */
[class*=»col-«] width: 100%;
>

It might seem odd that we have two sets of identical classes, but it gives us the opportunity in HTML, to decide what will happen with the columns at each breakpoint:

HTML Example

For desktop:

The first and the third section will both span 3 columns each. The middle section will span 6 columns.

For tablets:

The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

Example

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called «Landscape» orientation:

Example

The web page will have a lightblue background if the orientation is in landscape mode:

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen sizes:

Example

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) div.example display: none;
>
>

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on different screen sizes:

Variable Font Size.

Example

/* If the screen size is 601px or more, set the font-size of

/* If the screen size is 600px or less, set the font-size of to 30px */
@media only screen and (max-width: 600px) div.example font-size: 30px;
>
>

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Источник