2015-10-25 5 views
1

Я работаю на личном веб-сайте, а не на быстродействующем веб-сайте, но я просто хочу иметь одинаковые «макеты» по крайней мере между разными экранами (а не мобильными).Как я могу получить ту же «ширину»?

Например:

<div class="first-div"> 
    <div class="second-div"></div> 
</div> 

CSS выглядит следующим образом:

.first-div{ 
    width:100%; 
    height:100%; 
    background-color:blue; 
} 

.second-div{ 
    width:1380px; 
    height:1000px; 
    background-color:red; 
} 

Когда я проверить это в моих 13" экран красный (второй дел) тихо, но в другом ноутбуке (даже 13 "), я должен прокручивать по горизонтали, чтобы увидеть весь второй div (красный).

Мой вопрос в том, что такое хорошая ширина, даже если я не хочу отзывчивого дизайна?

+4

что важно ваше целевое разрешение, а не физический размер экрана. Когда вы используете один и тот же физический размер экрана с разными разрешениями, результаты разные. Каково ваше целевое разрешение? –

+1

... и уровень масштабирования. –

+0

Спасибо @KhanhTO. Но как я могу установить ширину (или высоту), имея в виду, что эти значения будут в порядке в разных разрешениях? что такое хорошая ценность? % или px? – Sushi

ответ

0

Если вы идете по фиксированной ширине, некоторые экраны придется прокручивать.

Вы смешиваете относительную и фиксированную здесь.

Если вы хотите, чтобы у вас не было определенного предела, используйте max-width и согласитесь, что некоторые экраны не будут работать должным образом.

2

Я думаю, используя слова same "layouting" и same “width” вы имеете в виду процентов проклейки.

, если вы измените свой CSS на это, например, и дать первый Див position: relative:

.first-div{ 
    width:100%; 
    height:100%; 
    background-color:blue; 
    position: relative; 
} 

.second-div{ 
    width:95%; 
    height:95%; 
    background-color:red; 
} 

вы будете получить почти такое же расположение в каждом экране, так что, например, первая ДИВ заполняет всю экран и второй один получает только 95%

1

Вы можете попробовать

.first-div{ 
    width:100%; 
    height:100%; 
    background-color:blue; 
} 

.second-div{ 
    margin:0px auto; 
    width:98%; 
    height:98%; 
    background-color:red; 
} 
Смежные вопросы