w3schools.com – CSS3 media Queries

@media not only media type and
(expressions){
CSS code ;
}

example

@media screen and (min-width:480px)
{
body{
background-color: lightgreen;
}
}

w3schools – CSS3 media Queries Examples

CSS Responsive

w3schools – Responsive Web Design – Introduction

w3schools – Responsive Web Design – The Viewport

visible area of a web page

<meta name = “viewport” content=”width=device-width, inital-scale=1.0″>

  1. Do Not use large fixed width Elements
  2. Do Not let the content rely on a particular viewport width to render well
  3. Use Css Media Queries to apply different styling for small and large screens

w3schools – Responsive Web Design – Grid-view

designing web pages with grid view

Responsive grid-view has 12 columns

Building Responsive Grid-view

  1. box-sizing

Calculate percentage of the columns
100% / 12 columns = 8:33%

9,989:30 Left / 10:28 Done 

Advertisements