Resposive web layout using html css

I would like to like share all of you about how to create responsive web layout using HTML CSS media. Download Example here


The important in this article is  Media screen


<!DOCTYPE HTML>
<html>

<head>

    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
   
    <title>Resolution Dependent Layout</title>
   
    <link rel='stylesheet' type='text/css' href='css/style.css' />
   
    <link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
   
    <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
    <link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
   
</head>

<body>

    <div id="page-wrap">

        <div id="header">Header</div>
       
        <div id="main-content">Content</div>
           
        <div id="secondary-one">Secondary</div>
        <div id="secondary-two">Extra</div>
           
    </div>
   
</body>

</html>
Share on Google Plus

About Unknown

    Blogger Comment
    Facebook Comment

1 comments:

  1. Many website designing company in Chicago have been providing web design services to their customers for some years now.

    ReplyDelete