Responsive design
Download as PPTX, PDF1 like214 views
This document discusses responsive web design. It defines responsive web design as websites that automatically adjust their size and shape depending on the device they are being viewed on. It explains that responsive design was coined in 2010 and listed as a top web design trend in 2012. It describes how responsive design works using new CSS3 media queries that allow different CSS code to execute based on browser width constraints. It provides an example of how to write media queries in CSS to target different browser/device sizes and make changes to elements based on screen width.
Responsive design
- 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
- 3. Responsive WebDesign ! Niyaz Kannanchery niyazofficial@gmail.com tweetboy niyazsky 9746 049 048 Oohhh. Why my site not resizing on mobile !!!!!
- 4. History Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Apart. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. Responsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazine.
- 5. So What’s Responsive Website Website that automatically adjust their Size and Shape depending on the device they're being viewed on.
- 6. Real Example
- 7. Screen Size
- 8. How it Works ! A new addition to CSS3 is an element called a Media query, A media query allows CSS code to be executed only when certain constraints are met. For instance, you can set the media query to turn the background color of the webpage blue only when the browser size is 480px. So using media queries, you can have several different sets of CSS for your website that can be activated for many different devices or any browser sizes.
- 9. How To Create Media Queries ! Media Queries are elements of CSS3, so they go in the CSS portion of your webpage. Normally the CSS is located in the header using style tags. To create a media query, just add the code below to your CSS. Then after the @media declaration, you can set the parameters you want to target, 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 the media parameters in between a maximum value and a minimum value, you can use both the max-width and min-width attributes within the same parameter. <style> @media { } </style>
- 10. How To Create Media Queries ! <style> @media { } </style> The only thing left to do now is to add your own custom CSS code in between the curly brackets. The CSS can be minimal changes, or you can completely change the design and makeup of the entire site. How much or how little is completely 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>
- 12. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
- 13. Contact Us