Disclaimer: This presentation is prepared by trainees ofbaabtra as a part of mentoring program. This is notofficial docume...
Responsive WebDesign !NiyazKannancheryniyazofficial@gmail.comtweetboyniyazsky9746 049 048Oohhh. Why my site not resizing o...
HistoryEthan Marcotte coined the term responsive web design(RWD) in a May 2010 article in A List Apart. He described theth...
So What’s Responsive WebsiteWebsite that automatically adjust their Size and Shape depending on thedevice theyre being vie...
Real Example
Screen Size
How it Works !A new addition to CSS3 is an element called a Media query, A mediaquery allows CSS code to be executed only ...
How To Create MediaQueries !Media Queries are elements of CSS3, so they go in the CSS portion of yourwebpage. Normally the...
How To Create MediaQueries !<style> @media { } </style>The only thing left to do now is to add your own custom CSS code in...
QUESTIONS SECTION
If this presentation helped you, please visit ourpage facebook.com/baabtra and like it.Thanks in advance.www.baabtra.com |...
Contact Us
Responsive design
Upcoming SlideShare
Loading in...5
×

Responsive design

98

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
98
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. Disclaimer: This presentation is prepared by trainees ofbaabtra as a part of mentoring program. This is notofficial document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .Ltd
  2. 2. Responsive WebDesign !NiyazKannancheryniyazofficial@gmail.comtweetboyniyazsky9746 049 048Oohhh. Why my site not resizing on mobile !!!!! 
  3. 3. HistoryEthan Marcotte coined the term responsive web design(RWD) in a May 2010 article in A List Apart. He described thetheory and practice of responsive web design in his brief2011 book titled Responsive Web Design. Responsive designwas listed as #2 in Top Web Design Trends for 2012 by .netmagazine.
  4. 4. So What’s Responsive WebsiteWebsite that automatically adjust their Size and Shape depending on thedevice theyre being viewed on.
  5. 5. Real Example
  6. 6. Screen Size
  7. 7. How it Works !A new addition to CSS3 is an element called a Media query, A mediaquery allows CSS code to be executed only when certain constraints aremet.For instance, you can set the media query to turn the background color ofthe webpage blue only when the browser size is 480px.So using media queries, you can have several different sets of CSS for yourwebsite that can be activated for many different devices or any browsersizes.
  8. 8. How To Create MediaQueries !Media Queries are elements of CSS3, so they go in the CSS portion of yourwebpage. Normally the CSS is located in the header using style tags. Tocreate a media query, just add the code below to your CSS.Then after the @media declaration, you can set the parameters you want totarget, such as browser size or device size. For browsers, you can use the max-width attribute. For devices, you can use the max-device-width attribute. To set themedia parameters in between a maximum value and a minimum value, you can useboth the max-width and min-width attributes within the same parameter.<style> @media { } </style>
  9. 9. How To Create MediaQueries !<style> @media { } </style>The only thing left to do now is to add your own custom CSS code in betweenthe curly brackets. The CSS can be minimal changes, or you can completelychange the design and makeup of the entire site. How much or how little iscompletely up to you.<style>@media screen and (max-width:480px){ div.main{ width:300px; }div.row2col1{ font-size:0.5em; }img{ width: 250px; }p.welcome { font-size:0.8em; }p.content { font-size:0.7em; } } </style>
  10. 10. QUESTIONS SECTION
  11. 11. If this presentation helped you, please visit ourpage facebook.com/baabtra and like it.Thanks in advance.www.baabtra.com | www.massbaab.com |www.baabte.com
  12. 12. Contact Us
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×