Fluid / Responsive Website for beginners


Easiest way for a Fluid / Responsive Website, here’s are the codes.

Add this on your HTML (highlighted code):

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="...">
<meta name="author" content="...">
<meta name="keywords" content="...">
<title>Name of your Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
...
</body>
</html>

and for your CSS:

/* Mobile Phones Portrait */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/* Mobile Phones Landscape */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/* Mobile Phones Portrait or Landscape */
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/* iPhone 4+ Portrait or Landscape */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* Tablets Portrait or Landscape */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

/* Desktops */
@media screen and (min-width: 1024px){
/* some CSS here */
}

Reference: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Advertisements

2 thoughts on “Fluid / Responsive Website for beginners

  1. continuously i used to read smaller articles or reviews which as well clear their motive,
    and that is also happening with this paragraph which I am reading at this place.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s