Question

我正在尝试使用CSS媒体查询和相对宽度/高度值（以％为单位）的响应式布局。在我从浏览器放大之前，所有屏幕宽度都能正常工作。当我放大时，只有字体大小增加而div容器＆＃39;高度/宽度保持不变。这＆＃34;分手＆＃34;我的设计。任何解决方案？

html： -

    <html>
    <head>
    <link href="style.css" type="text/css" rel="Stylesheet" />
    </head>
    <body>


    <div id="banner" style="background-color:Black; width:100%; height:15%">
    <div  style="margin-left:10%; width:20%; float:left"> <img id="logo" src="b.jpg" />
    </div> 
    <div id="title" style="  float: right; color:White"> Ganju and his activities</div>
    </div>
    <div id="dir_cont" style="margin:auto;"> 
    <img id="dir" src="a.jpg" /> <span id="dir_a">We like to introduce ourselves as     
    a........*some text*
    </span>
    </div>

    </body>
    </html>

和css文件： -

    #dir_cont
    {
     width: 80%;
     }

    #dir
   {
    width:30%;
    float:left;
    }

    #dir_a
    {
    width:70%;
    float:left;

     }


    #logo
    {
    height:100%;
    }

    #title
    {
    margin-right:10%;
    }

    @media all and (max-width:450px){
    #title
    {
    font-size:3vw;
    margin-right:0%;

    }
    #dir_cont{width:100%}
    #dir{width:100%;

    float:none;
    }
    #dir_a
    {
    width:100%;
    float:none;
    }

Answer 1

百分比大小取自父容器。如果父级具有固定大小（例如px），那么您将始终获得固定大小。查看http://css-tricks.com/css-font-size/

为什么在缩放浏览器时只会增加字体大小？

1 个答案: