Responsive design not working for text

问题

I want to make a responsive design for my page, I have made the layout and it is working perfecty on resizing but when I add text in my page and then resize it, things get mess up. It is because the layout is resizing itself accordingly but the text is not resizing itself. How it will be solved?

Here is the html code:

<body>

<div id="mainpage">

<div id="menu">
<div id="menuhomepage"><a href="#"></a></div>
<div id="menublog"><a href="#"></a></div>
<div id="menuphoto"><a href="#"></a></div>
<div id="menuabout"><a href="#"></a></div>
<div id="menulinks"><a href="#"></a></div>
<div id="menucontact"><a href="#"></a></div>
</div>

<div id="header">
<div id="headertext"><a href="#">logologo</a></div>
</div>

<div id="content">

<div id="articles"></div>

<div id="sidebar">
<div id="searchbar"></div>
<div id="tempus"></div>
<div id="categories"></div>
<div id="blogroll"></div>
<div id="archieve"></div>
</div>

</div>

</div>

<div id="footer"></div>
</body>

And here goes the CSS code:

body
{
    background-image: url(images/background.jpg);
    min-height: 1000px;
    background-repeat: repeat-x;
    background-color: #DBE2D0;
    width: 100%;
    margin: 0%;
    font-size: 100%;
    min-width: 150px;
}

#mainpage
{
    width: 80%;
    min-height: 900px;
    margin-left: 10%;
}

#menu
{
    width: 100%;
    height: 60px;
}

#menuhomepage
{
    background-color: #5D7144;
    width: 30%;
    height: 60px;
    float:left;
}

#menuhomepage a
{
    text-decoration: none;
    color: White;
    margin-left: 60%;
    margin-bottom: 10px;
}

#menublog
{
    background-color: #5D7144;
    width: 10%;
    height: 60px;
    margin-left: 0.1%;
    float: left;
}

#menuphoto
{
    background-color: #5D7144;
    width: 15%;
    height: 60px;
    margin-left: 0.1%;
    float: left;
}

#menuabout
{   background-color: #5D7144;
    width: 10%;
    height: 60px;
    margin-left: 0.1%;
    float: left;
}

#menulinks
{   
    background-color: #5D7144;
    width: 10%;
    height: 60px;
    margin-left: 0.1%;
    float: left;
}

#menucontact
{
    background-color: #5D7144;
    width: 24.5%;
    height: 60px;
    margin-left: 0.1%;
    float: left;
}

#header
{
    height: 170px;
}

#header a
{
    text-decoration: none;
    font-size: 40pt;
    color: White;
}

#headertext
{
    padding-left: 40%;
    padding-top: 5%;
}

#content
{
    background-color: White;
    min-height: 1600px;
}

#articles
{
    width: 60%;
    border: 2px solid Gray;
    min-height: 1400px;
    margin-left: 5%;
    margin-top: 50px;
    float: left;
}

#sidebar
{
    width: 25%;
    border: 2px solid Gray;
    min-height: 1400px;
    margin-left: 5%;
    margin-top: 50px;
    float: left;
}

#searchbar
{
    width: 96%;
    border: 2px solid Gray;
    min-height: 150px;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    float: left;
}

#tempus
{
    width: 96%;
    border: 2px solid Gray;
    min-height: 100px;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 30px;
    float: left;
}

#categories
{
    width: 96%;
    border: 2px solid Gray;
    min-height: 350px;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    float: left;
}

#blogroll
{
    width: 96%;
    border: 2px solid Gray;
    min-height: 350px;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    float: left;
}

#archieve
{
    width: 96%;
    border: 2px solid Gray;
    min-height: 350px;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    float: left;
}

#footer
{
    background-image: url(images/footer.png);
    width: 100%;
    height: 200px;
    margin-top: 50px;
    margin-left: 0px;
}

Check the jsfiddle code here: http://jsfiddle.net/2NNNy/

On adding the "logologo" text and resizing, the font-size is not resizing, why?

回答1:

This should work, hope this helps

@media screen and (max-width: 320px) { /* for screen size less or equal to 320px*/
     #header a{
        font-size: 80%; /*Changes as per your requirement*/
     }    
}

@media screen and (max-width: 700px) { /* for screen size less or equal to 700px*/
#header a{
    font-size: 120%; /*Changes as per your requirement*/
} 
}

and include this in your head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

回答2:

Liquid layouts alone just done cut it anymore...

You are going to want to delve into mediaqueries to get the effect you want.

Heres some good examples. Have a look at the source!

http://mediaqueri.es/

Also you might want to try this developer guide...

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (min-width: 700px) { 
   font-size: 75%;
}

@media (min-width: 500px) { 
   font-size: 50%;
}

回答3:

Always use percentage for font-size and dont forget to add the viewport meta in your page head

Suppose your body font-size is 100%, the default font-size will be 16px, and if you want to apply a 13px for a paragraph you can easily calculate like this

13/16 ie 81%, pretty simple huh,

happy coding :)

来源：https://stackoverflow.com/questions/16988684/responsive-design-not-working-for-text

标签

html

css

responsive-design