SlideShare una empresa de Scribd logo
1 de 11
Descargar para leer sin conexión
WDEV118
Media Queries for Standard Devices




                          about.me/babon
Smartphones (portrait & landscape)

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
  /* Styles */
}



                                  about.me/babon
Smartphones (landscape)

@media only screen
and (min-width: 321px) {
  /* Styles */
}




                           about.me/babon
Smartphones (portrait)

@media only screen
and (max-width: 320px) {
  /* Styles */
}




                           about.me/babon
iPads (portrait and landscape)

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
  /* Styles */
}



                                   about.me/babon
iPads (landscape)

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation : landscape) {
  /* Styles */
}


                                  about.me/babon
iPads (portrait)

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation : portrait) {
  /* Styles */
}


                                 about.me/babon
Desktops and Laptops

@media only screen
and (min-width: 1224px) {
  /* Styles */
}




                            about.me/babon
Large Screens

@media only screen
and (min-width: 1824px) {
  /* Styles */
}




                            about.me/babon
iPhone 4

@media
only screen and (-webkit-min-device-pixel-ratio
: 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
   /* Styles */
}


                                   about.me/babon
Supplemental

Source: CSS Tricks

Download Template




                     about.me/babon

Más contenido relacionado

Similar a WDEV118 Media Queries

Responsive website design
Responsive website designResponsive website design
Responsive website design
svaithiyalingam
 
Idiot's Guide to viewport and pixel
Idiot's Guide to viewport and pixelIdiot's Guide to viewport and pixel
Idiot's Guide to viewport and pixel
Nathan Campos
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Patrick Lauke
 
Presentación WPmallorca PalmaActiva responsive design
Presentación WPmallorca PalmaActiva responsive designPresentación WPmallorca PalmaActiva responsive design
Presentación WPmallorca PalmaActiva responsive design
WPMallorca
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
betabeers
 
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
Responsive website building approach. Olga Smolyankina and Kate KalashnikovaResponsive website building approach. Olga Smolyankina and Kate Kalashnikova
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
ADCI Solutions
 

Similar a WDEV118 Media Queries (20)

Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Responsive website design
Responsive website designResponsive website design
Responsive website design
 
Mozilla & Mobile
Mozilla & MobileMozilla & Mobile
Mozilla & Mobile
 
Idiot's Guide to viewport and pixel
Idiot's Guide to viewport and pixelIdiot's Guide to viewport and pixel
Idiot's Guide to viewport and pixel
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
 
Presentación WPmallorca PalmaActiva responsive design
Presentación WPmallorca PalmaActiva responsive designPresentación WPmallorca PalmaActiva responsive design
Presentación WPmallorca PalmaActiva responsive design
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
CSS
CSSCSS
CSS
 
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
Responsive website building approach. Olga Smolyankina and Kate KalashnikovaResponsive website building approach. Olga Smolyankina and Kate Kalashnikova
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive web design for desktop, tablets and smartphones
Responsive web design for desktop, tablets and smartphonesResponsive web design for desktop, tablets and smartphones
Responsive web design for desktop, tablets and smartphones
 
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Bootstrap Tutorial
Bootstrap Tutorial Bootstrap Tutorial
Bootstrap Tutorial
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Más de Gene Babon (20)

Job Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling AlleysJob Search | Tropical Depressions | Bowling Alleys
Job Search | Tropical Depressions | Bowling Alleys
 
Tech Over Fifty Launch Meeting
Tech Over Fifty Launch MeetingTech Over Fifty Launch Meeting
Tech Over Fifty Launch Meeting
 
Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018Anatomy Virtual Self Study Group NEPHP 2018
Anatomy Virtual Self Study Group NEPHP 2018
 
Become a Front End Web Developer
Become a Front End Web DeveloperBecome a Front End Web Developer
Become a Front End Web Developer
 
Navigating a Career in Web Technology
Navigating a Career in Web TechnologyNavigating a Career in Web Technology
Navigating a Career in Web Technology
 
Info Session
Info SessionInfo Session
Info Session
 
Info session
Info sessionInfo session
Info session
 
Getting Things Done
Getting Things DoneGetting Things Done
Getting Things Done
 
jQuery Mobile Hour 4
jQuery Mobile Hour 4jQuery Mobile Hour 4
jQuery Mobile Hour 4
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 18
Lesson 18Lesson 18
Lesson 18
 
Lesson 17
Lesson 17Lesson 17
Lesson 17
 
Lesson 16
Lesson 16Lesson 16
Lesson 16
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
Lesson 11
Lesson 11Lesson 11
Lesson 11
 
Lesson 10
Lesson 10Lesson 10
Lesson 10
 
Lesson 09
Lesson 09Lesson 09
Lesson 09
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
 
Lesson 04
Lesson 04Lesson 04
Lesson 04
 
Lesson 03
Lesson 03Lesson 03
Lesson 03
 

WDEV118 Media Queries