размер зависит от размера экрана?

У меня есть холст и некоторые вкладки на моей странице: http://www.taffatech.com/Paint.html Теперь эти размеры устанавливаются вручную. Мне интересно, как сделать их размер в зависимости от размера экрана, поскольку теперь они отлично работают на моем, но на меньших экранах он обрезается.размер зависит от размера экрана?

Хотелось бы, чтобы холст был 2/3 ширины, а вкладки равны 1/3, а высота - всей высотой экрана. Возможно ли это, и что было бы лучшим способом сделать это? CSS, divs? JQuery? Я знаю, как сделать canvas весь размер экрана с некоторыми jquery, но я не уверен, что это правильный путь, поэтому я пришел сюда, чтобы спросить! благодаря!

источник

2013-06-16 Steven Barrett

Вы можете использовать проценты в CSS с помощью @ media-запросов. – elclanrs

У меня нет опыта работы с css, не могли бы вы объяснить, как и где это сделать? –

Я не думаю, что вам нужны медиа-запросы для этого. Вы сделали бы холст на 66.6666666% и табуляционный контейнер на 33.3333333%. Вы должны были бы повторно перенести холст на изменение размера окна, поскольку, поскольку ширина может измениться и отрезать часть того, что было произведено. – probablyup

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

$("#canvas").css('width', 70 + '%'); 
$("#canvas").css('height', 100 + '%'); 
$("#toolbox").css('width', 30 + '%'); 
$("#toolbox").css('height', 100 + '%');

скопировать его в функцию инициализации вашего яваскрипта кода, если вы считаете, что это необходимо, вы можете добавить обработчик события «размер» для окна

$(window).resize(function() { 
    $("#canvas").css('width', 70 + '%'); 
    $("#canvas").css('height', 100 + '%'); 
    $("#toolbox").css('width', 30 + '%'); 
    $("#toolbox").css('height', 100 + '%'); 
});

где '#canvas' и '#toolbox' являются идентификаторами вашего холста и панели инструментов/панели соответственно.

Надеюсь, это поможет.

источник

2013-12-30 00:26:15 Opeoluwa

размер зависит от размера экрана?

ответ

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