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>

В случае, если вам нужно% -tage экрана пользователя, то вам нужно использовать 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 в absolute position как px

и внутри контейнера установлен макет в % значение ..

Answer 3

Это так просто используйте медиа-запросы для него. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp