CSS-固定百分比大小

Question

在CSS中，例如，如果將元素的寬度設置為50％，則當我調整頁面大小時，它將改變，而不是百分比，而是像素。

有什么方法可以將元素寬度設置為頁面的特定百分比，但是要確保在調整頁面大小時元素寬度不會改變？

Answer 1

只有使用CSS，您才可以使用固定的容器大小，並使用帶有百分比的內部元素。

 .container { width: 500px; } .innerDiv { width: 49%; float: left; text-align: center; background-color: #ccc; margin-left: 5px; } 

 <div class="container"> <div class="innerDiv"> Div 1 </div> <div class="innerDiv"> Div 2 </div> </div> 

如果您需要％-age用戶屏幕的年齡，則需要使用JavaScript來獲取實際大小，然后修改容器的大小。 這也是一個示例：

 $(document).ready(function() { $('.container').width($(window).width()); }); 

 body { margin: 5px 0; } .container { width: 500px; } .innerDiv { width: 49%; float: left; text-align: center; background-color: #ccc; margin-left: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="innerDiv"> Div 1 </div> <div class="innerDiv"> Div 2 </div> </div> 

Answer 2

將parent container設置為像px這樣的absolute position

並在容器內將布局設置為%值。

Answer 3

使用媒體查詢非常簡單。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp