O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

CSS3 Media Queries

175 visualizações

Publicada em

Basic introduction to CSS3 Media Query and Responsive Design.

Publicada em: Educação
  • Seja o primeiro a comentar

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

×