响应设计不工作的文本

响应设计不工作的文本

关注
发信
关注(28)粉丝(399)

响应设计不工作的文本

本文介绍了响应设计不工作的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为我的页面做出响应式设计，我已经做了布局，它在调整大小工作完美，但当我在我的页面中添加文本，然后调整大小，事情搞乱了。这是因为布局相应地调整大小，但文本不调整大小本身。如何解决？

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?

这里是html代码：

<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>

这里是CSS代码：

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;
}

在这里检查jsfiddle代码：

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

在添加logologo文本和调整大小，

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

推荐答案

这应该可以，希望这有助于

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*/
}
}

this in your head tag

and include this in your head tag

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

这篇关于响应设计不工作的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 07:42
Powered by LMLPHP ©2024 响应设计不工作的文本 0.037113