Skip to main content

Posts

Showing posts with the label Responsive

Viewport meta-tag used in Media Queries

Media queries plays an important role in Responsive Design. So in that situation the Meta-tag is the one which is most imporatant, <meta name="viewport" content="width=device-width, initial-scale=1.0"> Here      Device-width == Content to scale the full width of the device.      initial-scale  == the Zoom value to view the webpage      if the value of initial-scale= 1.0. This is the unscsaled document.      if you write user-scalable= "no".  Then it disables the zoom.               

Media Queries For Devices with their layout Widths (CSS)

There are Media Queries which help in making the website responsive. Here are some tips which will make easier to Understand the Media Queries to various devices Large Desktops : Layout Width will be from 1200px and Up               @media (min-width:1200px){                }   2.   Default : The Layout width will be from 980px and up   3.    Portrait Tablets : The Layout width will be from 768px and Above              @media (min-width:768px) and (max-width: 978px){               }   4.   Phones to Tablets: The Layout width will be from 767px and below             @media (max-width:767px){              }   5.   Phones :  The Layout width will be from 480px and below     ...