Отзывчивое проектирование с использованием JavaScript

Question

Я закончил разработку веб-сайта, и теперь мне бы хотелось сделать его отзывчивым, мне просто нужно сделать его отзывчивым для ПК, так как это невозможно сделать на мобильных телефонах с использованием сайта.

Я просто интересно, как ICloud ребята делают это, когда вы измените размер окна, все элементы позиционирования и повторной калибровки само по себе хорошо, они используют чистый CSS или смесь как CSS и JS ? iCloud

Я нашел много учебников, но до сих пор не мог понять, почему это не сработает для меня.

http://unstoppablerobotninja.com/demos/resize/

мой пример HTML структура:

<div id="place"> 
<div id="wrap"> 
    <div id="1"><img src="">this div needs to be responsive</div> 
    <div id="2"><img src="">this too</div> 
    <div id="3"><img src="">and this</div> 
    <div id="4"><img src="">also this</div> 
</div> 
</div> 

текущие стили CSS:

#place{ 
    position: relative; 
    width:3065px; 
    height:560px; 
    margin:0px; 
} 

#wrap, 
{ 
    width:975px; 
    height:480px; 
    position: absolute; 
    top:80px; 
} 

#1{ 
    width:215px; 
    height:103px; 
    position: absolute; 
    left:0px; 
    top:0px; 
     background-color:#409da5; 
} 

#1 img, 
{ 
    width: 100%; 
    height: 100%; 
} 

я могу использовать window.resize для обнаружения изменения размера окна, а затем изменить размер элементы, использующие jQuery.

$(window).resize(function() { 

       var nh = $("#1")width()/ratio; 
       $("#1").css('height', nh + 'px'); 

       var nw = $("#1").height() * ratio; 
       $("#1").css('width', nw + 'px'); 

    }); 

но есть ли другие способы сделать это?

Answer 1

Я порекомендую вам не использовать jQuery для этого.

Используйте вид-порт для обнаружения ширины устройства, как следующее:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> 

Затем вы можете использовать медиа-запросы.

По написанию медиа запросов мы можем написать устройство конкретных CSS для различной ширины устройства: подобны для устройств, имеющих ширину до 480px, запрос СМИ будет выглядеть следующим образом:

@media screen and (max-device-width: 480px) { 
    .column { 
    float: none; 
    } 
} 

Я могу дать вам три очень полезные ссылки для изучения:

1. http://alistapart.com/article/responsive-web-design
2. http://css-tricks.com/css-media-queries
3. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

Вы можете ввести css с определенным разрешением с помощью media queries.

Например:

<style> 
    @media screen and (max-width: 400px) { 
     /*These styles will only be applied if the user is on a phone*/ 
     body { 
      font-size: 100%; 
     } 
    } 
</style> 

Вы должны добавить transitions, чтобы сделать его более гладким при изменении размера. О, и не забудьте метатег viewport: <meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 3

Если вы хотите сместить и анимировать элементы, чтобы заполнить доступную ширину таким образом, который похож на пример icloud, тогда есть библиотека JavaScript под названием «Масонство» ', который достигает такого результата: http://masonry.desandro.com/

Помните, что термин «отзывчивый» имеет и более глубокие коннотации. Вы спрашиваете о целом процессе и подходах к созданию веб-сайтов, которые используют целый ряд методов на этом пути. Зайдите в CSS3 Media Queries для краткого изложения одного из самых больших аспектов работы здесь.

Answer 4

Возможно, вы можете сделать его отзывчивым с помощью javascript. Обратите внимание, что этот чистый javascript может быть немного трудно использовать изначально, поскольку то, о чем вы просите, похоже, является анимацией и т. Д. Следовательно, я бы предложил использовать библиотеку javascript под названием «jQuery». Вы можете найти учебник о том, как его использовать. here. Причина использования jquery заключается в том, что он позволяет использовать предопределенные функции для того, что вы просите. Так, например, можно было бы выполнить динамическое изменение размера, а также эффект, который он ускоряет вначале, а затем замедляется по мере приближения к концу моделирования, используя только несколько строк jQuery, тогда как в чистом javascript могут потребоваться десятки, если а не сотни строк (как случайное предположение). Не уверен, что люди iCloud используют, но это будет что-то вроде этого. Причина, по которой это здорово, - это то, что вы можете анимировать почти все - переходы цвета, изменение размера, перепозиционирование и т. Д. Вы даже можете создавать объекты с перетаскиванием! Чтобы использовать его, вам нужно будет загрузить библиотеку, поместить ее в папку в папке своего сайта и определить ссылку на нее в своем html.