CODEWITHSUNDEEP
htmlcssresponsive
Arpit Gupta
Arpit Gupta

Reputation: 33

Make static Page Responsive

I am beginner in web design i have developed a page using html and css . i want to convert my static page responsive so that whenever i re-size the browser the styling of my page remain same according to window size . below is my body width and height . 

body{
    width:100%;
    height:100%;
    margin:0%;
    background-color:white;
}

Now whenever i tried to re-size the browser window the styling of my page is not remain same.div are collapsing with each other .

Kindly give me some easy tips to convert my page responsive .

Upvotes: 0

Views: 3450

Answers (4)

Milind P. Chaudhari
Milind P. Chaudhari

Reputation: 111

  body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
  <body>
      <p>If screen size is less than 420px, then it will show lightblue color, or else it will show   light pink color</p>
   </body>

Upvotes: 1

Cherish
Cherish

Reputation: 312

Using Bootstrap if you are new in responsive websites

http://getbootstrap.com/

Upvotes: 0

Ali Zia
Ali Zia

Reputation: 3875

Adaptive layouts (Responsive layouts) consists of the following three factors:

1. Flexible Layouts:

The divs you use to create your web page layouts need to consist of relative length units. This means you shouldn't use fixed widths in your CSS, rather use percentages.

The formula to convert sizes from a design to percentages is (target/context)x100 = result

enter image description here

Lets take the picture above as an example of a design. To calculate what the size of the div on the left is going to be calculated like this: (300px/960px)x100 = 30.25%

The CSS would look something like this:

.leftDiv
{
    width: 30.25%;
    float: left;
}

.rightDiv
{
    width: 65%;
    float: left;
}

For text to automatically resize you can use a unit called VW (ViewWidth)

.myText
{
    font-size: 1vw;
}

This ensures that the text automatically resize relative to the view width.

2.Flexible Media:

Flexible media applies to images, videos and canvasses which automatically resize relative to its parent.

Example:

img, video, canvass
{
    max-width: 100%;
}

This ensures that these elements resize automatically inside its parent.

3. Media Queries:

The next step is to use media queries like you've done in your question, these media queries define certain CSS statements for certain screen sizes. I normally use only three media queries for computers screens, tablets and phone screens. Its not necessary to have more than this because the Flexible Layouts and Flexible Media will ensure relative resizing if done correctly.

You may find this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Source: Here

Upvotes: 0

Suraj
Suraj

Reputation: 287

Responsiveness is not only depend on the "body" tag. Each and every css div's needs to be match your responsiveness.. Better use @media queries for reponsiveness.

Upvotes: 0

Related Questions