Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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) ...
What is CSS Media Queries ?
• CSS Media Queries are a feature in CSS3
which allows you to specify when certain CSS
rules s...
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 lo...
How to use (1/2)
• /* Large desktop */
@media (min-width: 1200px) { ... }
• /* Portrait tablet to landscape and desktop */...
How to use (2/2)
<link rel="stylesheet" media="(max-width:
800px)" href=“style.css" />
<link rel=“stylesheet” media=“scree...
Useful tips
• If you are using Internet Explorer 6,7,8:
include this into html <head>
<!--[if lt IE 9]>
<script src="http:...
References
• http://cssmediaqueries.com
• http://mediaqueri.es/
• http://mobile.smashingmagazine.com
• http://css-tricks.c...
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
Nächste SlideShare
Wird geladen in …5
×

CSS3 Media Queries

174 Aufrufe

Veröffentlicht am

Basic introduction to CSS3 Media Query and Responsive Design.

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

CSS3 Media Queries

  1. 1. CSS Media Queries Man Math Support Developer 0978470847 manmath4@gmail.com 2/2/2013 Copy (c) right by Man Math - WEP12 1
  2. 2. 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
  3. 3. 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
  4. 4. 2/2/2013 Copy (c) right by Man Math - WEP12 4
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. Demo 2/2/2013 Copy (c) right by Man Math - WEP12 10
  11. 11. Thanks you! 2/2/2013 Copy (c) right by Man Math - WEP12 11

×