Как автоматически изменить размер шрифтов и изображений (полный сайт) при изменении размера окна? - PullRequest
Новая
       0

Как автоматически изменить размер шрифтов и изображений (полный сайт) при изменении размера окна?

1 голос
/ 07 апреля 2011

Как автоматически изменить размер шрифтов и изображений (полный веб-сайт) при изменении размера окна? У людей будут разные разрешения экрана.

CSS? JQuery? html% (плохо работал в chrome)

Мне нужно сделать слайд-шоу (презентация, слайды сделаны с помощью ckeditor)

Ответы [ 3 ]

3 голосов
/ 13 апреля 2011

Здесь я создал скрипт jQuery для настройки размера шрифта и ширины img. Это срабатывает при загрузке страницы и изменении размера окна в процентах от ширины браузера.

Демо: http://jsfiddle.net/Crndp/4/

$(document).ready(function() {

    fontSize();
    imgSize();

    $(window).resize(function() {
        fontSize();
        imgSize();
    });

    function fontSize() {
        $ww = $(window).width();
        $fontSize = ($ww / 25) + 'pt';
        $('body').css("font-size", $fontSize);
    }

    function imgSize() {
        $ww = $(window).width();
        $imgSize = ($ww / 5) + 'px';
        $('body img').css("width", $imgSize);    
    }

});

С математикой можно изменить размер изображения в зависимости от ваших потребностей, однако это основная идея.

0 голосов
/ 07 апреля 2011

Я думаю, вы найдете эту статью на Отзывчивом веб-дизайне очень полезной:

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

В нем рассказывается, как использовать гибкие изображения и как реализовывать медиазапросы (наряду с другими полезными вещами).

Оригинальная статья была написана A List Apart (разбив добавили несколько вещей тут и там): http://www.alistapart.com/articles/responsive-web-design/

Вот готовый HTML из отзывчивого демо : http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

0 голосов
/ 07 апреля 2011

Вы можете прикрепить практически любое событие к чему-то вроде: 

$(window).resize(function() {
  $('h1').css("fontSize", "32px");
});

Но если вы хотите сделать что-то более адаптируемое, вам придется оценить width x height из html element, из этого вы можете получить разумный размер для шрифтов.

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

...