SlideShare a Scribd company logo
RESPONSIVE WEBSITE
     DESIGN


             Presented by
         S.Vaithiya Lingam
Introduction
 Introductory article for Responsive web
  design is written by Ethan Marcotte.
 Released on may 2010.
What is mean by Responsive
Design?
 Responsive design means, Website
  automatically fits in the user’s device.
 If the user has a small screen, the
  elements will rearrange to the screen
  width.
Two important steps
 Meta tag
 Media Queries
Meta Tag
 <meta> tags always goes inside the
  <head> element.
 Provides metadata about the HTML
  document.
 Meta elements are typically used to
  specify page description, keywords, and
  other metadata.
Continue…
 <meta name="viewport"
  content="width=device-width, initial-
  scale=1.0">
 The width property controls the size of
  the viewport.
 Initial-scale property controls the zoom
  level when the page is first loaded
Media Queries
 CSS Media Query is the trick for
  responsive design.
 It is like writing if conditions…..
Example:
viewport width is 980px or less
viewport 700px or less
480px or less
For IE8 and older version
browsers..
<!--[if lt IE 8]>
<script src="http://css3-mediaqueries-
 js.googlecode.com/svn/trunk/css3-
 mediaqueries.js">
</script>
<![endif]-->
Some more media queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
Cont…
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
Cont…
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
Cont…
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
Cont…
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-
  ratio : 1.5),
only screen and (min-device-pixel-ratio :
  1.5) {
/* Styles */
}
Flexible Images

img {
max-width: 100%;
height: auto;
width: auto9; /* ie8 */
}
Flexible Embedded Videos

.video embed,
.video object,
.video iframe
{
width: 100%;
height: auto;
}
Advantage
 Compatibility.
 Sharing/Linking.
 No need to Redirect.
Disadvantage
   Image Resizing.
    ◦ This consumes unnecessary CPU and RAM.
 Longer time to load.
 Hover will not work
Demo
A demo on responsive website design can
  be found in the following website
http://www.studiopress.com/responsive/
THANK YOU

More Related Content

Similar to Responsive website design

Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
Dee Sadler
 
Mozilla & Mobile
Mozilla & MobileMozilla & Mobile
Mozilla & Mobile
dynamis
 
Bootstrap Tutorial
Bootstrap Tutorial Bootstrap Tutorial
Bootstrap Tutorial
Luan Nguyen
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
Nathan Smith
 
WDEV118 Media Queries
WDEV118 Media QueriesWDEV118 Media Queries
WDEV118 Media QueriesGene Babon
 
Presentación WPmallorca PalmaActiva responsive design
Presentación WPmallorca PalmaActiva responsive designPresentación WPmallorca PalmaActiva responsive design
Presentación WPmallorca PalmaActiva responsive designWPMallorca
 
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
Patrick Lauke
 
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 pixelNathan Campos
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Man Math
 
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 KalashnikovaADCI Solutions
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery
 
How to Develop Responsive Websites - Website Development
How to Develop Responsive Websites - Website DevelopmentHow to Develop Responsive Websites - Website Development
How to Develop Responsive Websites - Website DevelopmentMukesoft - IT Consultants
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
Patrick Lauke
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ben MacNeill
 
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Patrick Lauke
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++
Patrick Lauke
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Patrick Lauke
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
Wahyu Putra
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Vladimir Zhidal
 

Similar to Responsive website design (20)

Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Mozilla & Mobile
Mozilla & MobileMozilla & Mobile
Mozilla & Mobile
 
Bootstrap Tutorial
Bootstrap Tutorial Bootstrap Tutorial
Bootstrap Tutorial
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
WDEV118 Media Queries
WDEV118 Media QueriesWDEV118 Media Queries
WDEV118 Media Queries
 
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 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
 
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
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
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
 
How to Develop Responsive Websites - Website Development
How to Develop Responsive Websites - Website DevelopmentHow to Develop Responsive Websites - Website Development
How to Develop Responsive Websites - Website Development
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Confer...
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RI...
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Recently uploaded

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 

Recently uploaded (20)

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 

Responsive website design

  • 1. RESPONSIVE WEBSITE DESIGN Presented by S.Vaithiya Lingam
  • 2. Introduction  Introductory article for Responsive web design is written by Ethan Marcotte.  Released on may 2010.
  • 3. What is mean by Responsive Design?  Responsive design means, Website automatically fits in the user’s device.  If the user has a small screen, the elements will rearrange to the screen width.
  • 4. Two important steps  Meta tag  Media Queries
  • 5. Meta Tag  <meta> tags always goes inside the <head> element.  Provides metadata about the HTML document.  Meta elements are typically used to specify page description, keywords, and other metadata.
  • 6. Continue…  <meta name="viewport" content="width=device-width, initial- scale=1.0">  The width property controls the size of the viewport.  Initial-scale property controls the zoom level when the page is first loaded
  • 7. Media Queries  CSS Media Query is the trick for responsive design.  It is like writing if conditions…..
  • 9. viewport width is 980px or less
  • 12. For IE8 and older version browsers.. <!--[if lt IE 8]> <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3- mediaqueries.js"> </script> <![endif]-->
  • 13.
  • 14.
  • 15. Some more media queries /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ }
  • 16. Cont… /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
  • 17. Cont… /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }
  • 18. Cont… /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ }
  • 19. Cont… /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel- ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
  • 20. Flexible Images img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }
  • 21. Flexible Embedded Videos .video embed, .video object, .video iframe { width: 100%; height: auto; }
  • 23. Disadvantage  Image Resizing. ◦ This consumes unnecessary CPU and RAM.  Longer time to load.  Hover will not work
  • 24. Demo A demo on responsive website design can be found in the following website http://www.studiopress.com/responsive/