CSS3 media-queries
Upcoming SlideShare
Loading in...5
×
 

CSS3 media-queries

on

  • 727 views

Basic understanding of CSS3 media queries for dynamic fluid template and responsive. Media queries allow you to create template that mostly support for all kind of device screen like large desktop, ...

Basic understanding of CSS3 media queries for dynamic fluid template and responsive. Media queries allow you to create template that mostly support for all kind of device screen like large desktop, pc, tablet, and smartphone.

Statistics

Views

Total Views
727
Views on SlideShare
727
Embed Views
0

Actions

Likes
1
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS3 media-queries CSS3 media-queries Presentation Transcript

  • CSS Media Queries Man Math Support Developer 0978470847 manmath4@gmail.com 2/2/2013 Copy (c) right by Man Math - WEP12 1
  • Agenda • What is CSS Media Queries ? • Advantages of CSS Media Queries • How to use • References • Demo 2/2/2013 Copy (c) right by Man Math – Support Developer 2
  • What is CSS Media Queries ? • CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for different screen devices with at least one expression: Large desktop Portrait tablet to landscape and desktop Landscape phone to portrait tablet Landscape phones and down … 2/2/2013 Copy (c) right by Man Math – Support Developer 3
  • 2/2/2013 Copy (c) right by Man Math - WEP12 4
  • Advantages • Only valid CSS will be loaded • Web Responsive Design • Adjust print layout • Decrease using JavaScript to load page and detect screen • … 2/2/2013 Copy (c) right by Man Math – Support Developer 5
  • How to use (1/2) • /* Large desktop */ @media (min-width: 1200px) { ... } • /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } • /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } • /* Landscape phones and down */ @media (max-width: 480px) { ... } 2/2/2013 Copy (c) right by Man Math – Support Developer 6
  • How to use (2/2) <link rel="stylesheet" media="(max-width: 800px)" href=“style.css" /> <link rel=“stylesheet” media=“screen and (min-width: 701px) and (max-width: 900px)” href=“style.css” /> More … 2/2/2013 Copy (c) right by Man Math – Support Developer 7
  • Useful tips • If you are using Internet Explorer 6,7,8: include this into html <head> <!--[if lt IE 9]> <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> • Responsive Design <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 2/2/2013 Copy (c) right by Man Math – Support Developer 8
  • References • http://cssmediaqueries.com • http://mediaqueri.es/ • http://mobile.smashingmagazine.com • http://css-tricks.com/css-media-queries/ • https://developer.mozilla.org/en- US/docs/Web/Guide/CSS/Media_queries • … 2/2/2013 Copy (c) right by Man Math – Support Developer 9
  • Demo 2/2/2013 Copy (c) right by Man Math - WEP12 10
  • Thanks you! 2/2/2013 Copy (c) right by Man Math - WEP12 11