зависимость от размера экрана элементов веб страницы
Как сделать в css визуальные элементы на странице зависимым только от размера экрана, но не от окна броузера. Чтоб на разных мониторах элементы подгонялись по размеру, а когда пользователь меняет размер окошка они оставались неизменными. Как это сделать без javascript?
через css и @media
Код:
@media all and (min-device-width: 1024px) {
/*
стили для экранов больше 1024 px в ширину
*/
}
@media all and (min-device-width: 800px) and (max-device-width: 1024px){
/*
стили для экранов больше 800 px и меньше 1024 px в ширину
*/
}
/*
стили для экранов больше 1024 px в ширину
*/
}
@media all and (min-device-width: 800px) and (max-device-width: 1024px){
/*
стили для экранов больше 800 px и меньше 1024 px в ширину
*/
}
я думаю, используя float, margin и padding в % может помочь.
При помощи screen.width и screen.height узнать эти самые размеры, и от них уже стили валять.
Цитата: mfender
При помощи screen.width и screen.height узнать эти самые размеры, и от них уже стили валять.
Молодец, получи пирожок