• About
  • Advertise
  • Privacy & Policy
  • Contact
djavupixel.com
  • Home
  • Design
    • Fonts
    • Icons
    • Logo
    • Photography
    • Wallpapers
  • Development
    • CSS
    • JS
    • Web
  • WordPress
  • Contact
No Result
View All Result
  • Home
  • Design
    • Fonts
    • Icons
    • Logo
    • Photography
    • Wallpapers
  • Development
    • CSS
    • JS
    • Web
  • WordPress
  • Contact
No Result
View All Result
djavupixel.com
No Result
View All Result
Home Development CSS

An Introduction to CSS3 Media Queries

djavupixel by djavupixel
February 21, 2014
in CSS
180
0
An Introduction to CSS3 Media Queries
595
SHARES
1.9k
VIEWS
Share on FacebookShare on Twitter

Technologies such as CSS3 media queries are becoming increasingly important and all new websites should use them. The main reason is that visitors have certain expectations when viewing your site on everything from a desktop to a laptop to a netbook to a tablet to a handheld. They expect your site to maintain a high level of  user experience satisfaction no matter how or where they see your site. This article shows some techniques for using CSS3 media queries.

CSS 2.1 supported some media types, but they were quite limited for developers. With the introduction of CSS3 they introduced types like max-width, device-width and orientation (portrait or landscape). Devices such as the iPad and Android (with at least 2.2 installed) will take advantage of these types.

The power of CSS3 is that it allows you to tailor different resolutions and devices without changing the content.

How to load your CSS:

Normal version

<link rel="stylesheet" media="screen" href="style.css" /

Query based version

<link rel="stylesheet" media="screen and (max-width: 480px)" href="style-landscape-phone.css" />

For sake of efficiency, it is better to place multiple styles for different browsers and sizes into a single style sheet.

Style Sheets Using Media Queries

I’d recommend taking after Twitter’s Bootstrap with just these media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Small desktop */
@media (min-width: 980px) and (max-width: 1199px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Everything outside of any media query is applied to all devices, so your mail CSS should be outside of a media query. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

With this css code you should be able to created great responsive websites.

Tags: androidcssiPhonemedia-queries
Previous Post

Quick way on how to show hidden files in OSX

Next Post

Insert multiple rows via a PHP array into MYSQL

Next Post

Insert multiple rows via a PHP array into MYSQL

Leave a Reply Cancel reply

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

Categories

  • CSS
  • Design
  • Development
  • Fonts
  • Icons
  • JS
  • Logo
  • MacOS
  • Photography
  • Uncategorized
  • Wallpapers
  • Web
  • Wordpress

Tags

Air apple car Chrome city Coding communication Corporate Identity Cross Site Scriptings css Design e-Commerce Earth Extensions Free Google Gradient Styles grd Guideline Icons iPhone iPhone4 JavaScript jQuery Landscape Logo mac Nature Navigation osx Photography Photoshop php plugins PSD Sans-Serif security Serif setup SQL Injections Tutorial Water Wordpress WP e-Commerce xss
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Review
  • Apple
  • Applications
  • Computers
  • Gaming
  • Gear
    • Audio
    • Camera
    • Smartphone
  • Microsoft
  • Photography
  • Security

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.