2015-06-12 7 views
1

Простой вопрос, возможно, действительно очевидный, но я сделал круговой div, который будет floating action button. Я хочу, чтобы он был того же размера, независимо от размера экрана или разрешения. Например, если на смартфоне это на полдюйма в ширину, я хочу, чтобы он также был на половину дюйма шириной на iMac. Как я могу это достичь?Сохранение div того же размера независимо от разрешения экрана

.fab { 
 
    width: 58px; 
 
    height: 58px; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    background: #F44336; 
 
}
<div class="fab"></div>

+0

Можете ли вы добавить jsfiddle? –

+0

Используйте [абсолютные длины] (http://www.w3.org/TR/css3-values/#absolute-lengths) в CSS. '.5in' пружины. –

ответ

1

есть 6 различных единиц, в которых вы можете дать ширину высоту элемента.

см = "см"

мм = "мм"

в = "дюймов"

PX = "пикселей"

пт = "очки"

шт = «пики»

здесь топ три см, мм и в являются единицами, которые доза не опирающееся разрешения экрана и т.д. использовать один из этих трех блоков вместо пикса

+0

Сладкий! Не понимал, что вы можете использовать единицы измерения реальной жизни. –

+1

Обратите внимание, что с текущими определениями CSS все эти единицы являются единицами «реальной жизни». __pc__ - 1/6 дюйма, __pt__ - 1/72 дюйма, а __px__ - 1/96 дюйма. Просто на экранах с низким разрешением (например, обычных настольных мониторах) 1 пиксель округляется до аппаратного пикселя, а остальные единицы масштабируются соответственно. Например, если ваш монитор равен 110 dpi, «1 дюйм» по-прежнему составляет 96 пикселей или около 0,87 реальных дюймов. При использовании устройств с более высоким разрешением, таких как принтеры, аппроксимация лучше. –

Смежные вопросы