how to set html page size and page component with different screen resolution?

Page body get the width as screens size. Then how to other components of the page sizing with the relevant screen size ?

Answers


You need to use media queries. Here i've posted just a simple demo.. look at my fiddle..

Sample Fiddle

CSS

@media screen and (max-width:960px)
{
#header
{
    background: red;
    color: white;
    height: 50px;
    width: 100%;
}
}
@media screen and (min-width:720px) and (max-width:959px)
{
#header
{
    background: green;
    color: white;
    height: 50px;
    width: 100%;
}
}
@media screen and (min-width:480px) and (max-width:719px)
{
#header
{
    background: black;
    color: white;
    height: 50px;
    width: 100%;
}
}
@media screen and (max-width:479px)
{
#header
{
    background: purple;
    color: white;
    height: 50px;
    width: 100%;
}
}

For more info about media queries you can go through these following links.

http://css-tricks.com/css-media-queries/

http://en.wikipedia.org/wiki/Media_queries

http://www.w3.org/TR/css3-mediaqueries/


You need to elaborate your question, from what i understood: you need to set the width of components to 100% to make them equal to page size.


Need Your Help

Oracle : table with unused columns impact performance?

performance oracle

I have a table in my oracle db with 100 columns. 50 columns in this table are not used by the program accessing this table. (i.e. the select queries only select the relevant columns and NOT using '...

How do you handle escaping invalid attribute characters?

c# xml

I've got to get a quick and dirty configuration editor up and running. The flow goes something like this: