|
|
|
| Здравствуйте.
Может кто-то уже решал подобную задачу?
Хочу в зависимости от размера окна браузера корректировать css стили.
Суть. Делаю адаптивный дизайн.
4 блока по горизонтали. Каждый имеет margin-right: 12px.
Если экран широкий (>800px), то у последнего блока убираем отступ справа.
Если ширина экрана уменьшается (<800px), по горизонтали влезает только по два блока, поэтому убираем отступ справа у каждого второго блока.
Вот такой скрипт:
<script>
$(window).load(function() {
if($(window).width() < 800) {
$('.items div:odd')
.css({ 'margin-right':'0' });
}
else if($(window).width() > 800){
$('.items div:last-child')
.css({ 'margin-right':'0' });
}
});
</script>
|
Но данный скрипт требует перезагрузки страницы. Можно ли как-нибудь заставить его работать в реальном времени?
Может есть какое-нибудь более элегантное решение?
Заранее спасибо! | |
|
|
|
|
|
|
|
для: Boris
(09.03.2015 в 06:43)
| | Воспользуйтесь медиа запросами.
@media (max-width: 800px) {
// Стили для экранов шириной 800px и меньше
}
@media (min-width: 801px) {
// Стили для экранов шириной более 800px
}
|
Но если хочется все-таки через jQuery, то можно сделать так:
$(function() {
$(window).resize(function() {
if($(window).width() < 800) {
$('.items div:odd')
.css({ 'margin-right':'0' });
}
else if($(window).width() > 800){
$('.items div:last-child')
.css({ 'margin-right':'0' });
}
}).resize();
});
|
| |
|
|
|
|
|
|
|
для: Mookapek
(09.03.2015 в 19:25)
| | Спасибо большое. Я вышел из ситуации так. Но ваш способ тоже проверю.
$(document).ready(function() {
marginToggle();
$(window).resize(marginToggle);
});
function marginToggle() {
if ($('body').width() > 800) {
$('.items ul li.item:odd') .css({ 'margin-right':'1%' }),
$('.items ul li.item:last-child') .css({ 'margin-right':'0' });
} else if ($('body').width() < 800) {
$('.items ul li.item:odd') .css({ 'margin-right':'0' });
}
}
|
| |
|
|
|