2014-07-26 96 views
0

我在嘗試使用CSS媒體查詢和相對寬度/高度值(以%表示)的響應式佈局。所有屏幕寬度都可以正常工作,直到我從瀏覽器中放大。放大時,只有字體大小增加,而div容器的高度/寬度保持不變。這「打破」了我的設計。任何解決方案爲什麼在瀏覽器中只放大字體大小?

的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; 
    } 
+0

你的代碼在哪裏????????? – Richa

+0

附上代碼或準備jsfiddle如果可能的話 – Roshan

回答

相關問題