Connect with us

Hi, what are you looking for?

CSS

What are CSS media queries and how to use them

CSS Media Queries - How To Use Them On Mobile and Tablets

CSS media queries are an excellent way to deliver different styles to different devices.

The rapid growth of mobile devices has made it a challenge for web designers to ensure that their websites look good not only on a big screen but also on the smallest of phones and everything in between. Users no longer view web content only on traditional desktop computers but are increasingly using smartphones, tablets, and other devices with a wide range of dimensions.

Media queries look at the capability of the device and can be used to check many things, such as:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation (Landscape or Portrait)
  • Resolution

Examples

Want to learn how to implement media queries? Take a look at the following examples.

Max Width
The following CSS will apply if the viewing area is smaller than 770px. 

@media screen and (max-width: 770px) {
  .myclass {
    background: #000;
  }
}

Min Width
The following CSS will apply if the viewing area is greater than 1025px.

@media screen and (min-width: 1025px) {
  .myclass {
    background: #000;
  }
}

Combine Multiple Media Queries
The following code will apply if the viewing area is between 400px and 600px.

@media screen and (min-width: 400px) and (max-width: 600px) {
  .myclass {
    background: #000;
  }
}

Device Width
The following code will apply if the max-device-width is 667px (eg. iPhone 6 Landscape Width).

@media screen and (max-device-width: 667px) {
  .myclass {
    background: #000;
  }
}

Linking To A Different Style Sheet
This will apply a different style sheet depending on set device width.

<link rel="stylesheet" media="screen and (max-width: 667px)" href="smallerdevice.css">
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisement

More On The Net BLog

Business

As per our previous announcement, the Website Helper blog has now become thenet.blog. Here we have it, 36 approved UK business directories you can...

CSS

CSS media queries are an excellent way to deliver different styles to different devices. Here are CSS Media Queries for targeting your iPad in...

Web Hosting

GoDaddy has become a household brand, they are one of the biggest website hosting and domain name companies in the world. However, being the biggest does...

WordPress

Did you know that uninstalling WordPress plugins from the dashboard is simply not enough? Many website owners have most likely installed and tested several WordPress plugins but...

Business

Are you looking for alternatives to Peopleperhour.com to outsource your next project? For those that don’t know what Peopleperhour.com is, it’s an online freelance micro job...

SEO

Traffic is bad on the road. But it is a blessing on a website or blog- as long as your bandwidth can handle it....

WordPress

The problem faced by many WordPress websites using contact forms is spamming. It is frustrating and time-consuming to deal with. Spamming happens when malicious...

Business

Whether you are a freelancer or a business with several employees, in this day and age,  you will need to have a website. A...

Advertisement