Fix Mobile Usability Issues
of Your Website Today

CONTACT US

How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

Use CSS3 media queries to make a responsive website

use css3 media queriesTo make mobile version of website, the existing version of your site needs to be made responsive. One way to accomplish this is to use CSS3 media queries. CSS3 includes the “@media” rule, which has the tools to help you create site content that is fully responsive. A CSS3 media query doesn’t look for a type of device being used to view a site. Instead it looks at the capability of the device.

How to use CSS3 media queries to make your website responsive

To make your website responsive with CSS3, you need to use the “@media” rule. The @media rule is used in much the same way you would with regular styling with curly brackets, except this property encloses around other styles as in the following example:

1  @media type‐of‐media (expression) {

2         .sample‐class {

3           width:100px;

4           color:ffffff;

5        }

6  }

The enclosed elements take on the rules set by “@media”. You can define the type of media to display, such as phones and tablets, printers or screen readers. After choosing a media type, you can then set its values in terms of sizing with an expression. CSS3 allows you to do a lot when creating a responsive site and it starts with knowing how to use media queries to choose the type of media that you want to be responsive

Defining different screens using media queries

In your style.css file type in “@media”, and add the media type right next to it. If you decide not to add anything, then it defaults to all screen types or the specific size you outline in the next step. You can use “all” as well. Here are the other options you have for media types:

  • Screen: You can use this for any screen from mobile phones and tablets to laptops and desktops.
  • Print: This one’s used for printers and can create a printer-friendly version of a page
  • Speech: This media type is used for screen readers that analyze a page and read the text content out loud.

Before the media type, you can also enter “not” to display a style for any screen that isn’t the media type you enter or “only” to display styling for only the media type you define. If you use either of these, you do need to also add a media type since this won’t be optional any longer. With all this in mind, so far you can type something that looks similar to this:

@media only screen

Styling for screen sizes with CSS3

Now you define the screen sizes that are required in order to apply the styles you enter later on. After the media type, enter “and”, then follow it with an expression. If you use multiple expressions, they should all be separated with “and” as well. In this case, an expression is used to add media features such as sizing and they are entered in between parentheses. When you’re done adding the expressions, type your curly brackets and add your CSS to style your design for the media type you defined:

1  @media only screen and (max‐width:1024px) {

2         .your‐css {

3            /* All your styling goes here */

4         }

5  }

Here a “max‐width” of 1024 pixels was used. This means the maximum width is set to the size of an iPad screen. This is how you can use an expression to define a specific size of a screen.   When you use any of the following as expressions, you can control how different mobile devices view your site’s design and content:

  • max‐width: The maximum size of the media type’s screen width that’s allowed in order to display the styles that are set within the “@media” rule. Anything larger and the styles won’t be displayed.
  • min‐width: Sets the minimum size of the media type’s screen width. Anything smaller and the styles won’t be displayed.
  • max‐height: This sets the maximum height a media type’s screen is allowed to have in order for the enclosed styles to be displayed.
  • min‐height: Set a minimum height for a screen. If a screen is the same or larger than the amount you entered, the enclosed styles are displayed on the device.

Typically, the widths are usually set and you can leave out the height unless you have a specific style that requires it. Keep in mind that all devices are meant to scroll up and down to view all the content on the page and this is why it’s usually not used. Once you know the width of the different screen sizes for mobile devices, you can easily style your theme and content to display well for the specific devices you choose. There are many other expressions and media features you can use to do things such as define the resolution, color ratio and color index for your media types as well as many others. Also, if you are looking for specific plugin in mobile version, here are some.

In this way you can use CSS3 media queries to make a responsive website.

Contact Us

Click to reload image =
Send