1 / 12

Learn Responsive Design in 3 Easy Steps

Before few days back, one of my friend asked me that how to build responsive layout and i just replied him that my blog is responsive.

dynaaddison
Download Presentation

Learn Responsive Design in 3 Easy Steps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Learn Responsive Design in 3 Easy Steps Best Free Tutorial on Responsive Design

  2. Learn Responsive Web Design Online Before few days back, one of my friend asked me that how to build responsive layout and i just replied him that my blog is responsive. Even I have worked with many websites’ responsive layout, you can have a look into devices and. You can see css into it to develop responsive layout.

  3. Learn Responsive Web Design Online Still My friend was confused and not got much idea how to develop responsive layout. So today I am going to explain steps to how you the basics of responsive design for any website work with device orientations which detect the type of device and change the site’s behavior accordingly.

  4. Learn Responsive Web Design Online

  5. Learn Responsive Web Design Online So, Let’s go through the steps Step 1:Include the Viewport First of all, add below meta tag into your < head> tag. • This is a most important meta viewport tag to set the correct scale of a website in devices.If its not added, responsive layout may suffer

  6. Learn Responsive Web Design Online from some issues like fonts not matches with design. Step 2: Add Media Screen Next, Add css link with media=”screen” into <head > tag which is shown in below code: • It’s used to allow part of CSS rules to the

  7. Learn Responsive Web Design Online specific configuration. Step 3: Media Queries • CSS3 media query is play main role for responsive design. CSS3 media queries are one kind of conditions to figure out what resolution of device orientation it’s being served on browser.

  8. Learn Responsive Web Design Onlines • So Here, I am going to explain most used media queries are : • 320px – iPhone Portrait • 480px -iPhone Landscape • 768px – Ipad Portrait • 1024px – Ipad Landscape • 1200px – Normal views

  9. Learn Responsive Web Design Online • Let’s see Breakpoints we need to put for most used media queries. /* Media Queries for iPhone Portrait */ @media only screen and (max-width:479px) { } /* Media Queries for iPhone Landscap CSS */ @media only screen and (min-width: 480px) and (max-width: 767px){

  10. Learn Responsive Web Design Online } /* Media Queries for iPad Portrait */ @media only screen and (min-width: 768px) and (max-width: 799px) { } /*Media Queries for Normal */ @media only screen and (min-width: 1024px) and (max-width: 1200px){ }

  11. Learn Responsive Web Design Online Here, I have explained basics about responsive layout but You can write as many media query as you like. I hope this post was useful & it has helped you to create responsive design for your website. Thanks for reading and feel free to share your thoughts with us at CreativeDev!

  12. Learn Responsive Web Design Online Thank You!!! info@creativedev.in

More Related