Отзывчивое изменение размера

0

У меня есть div, который содержит следующий макет (верхнее изображение): http://tinypic.com/r/287eu88/8

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

Вот jsfiddle: http://jsfiddle.net/9DZSA/1/

Если кто-то может указать мне в правильном направлении, это было бы хорошо, я новичок, поэтому мой код, вероятно, не очень хорош, поэтому любые указатели тоже будут хороши!

Благодарю!

"Ссылки на jsFiddle.net должны сопровождаться кодом" - Ну, я не нацелен на определенный элемент, но вот html, чтобы удовлетворить это требование:

ПОСЛЕДНИЙ ПРОЕКТ

 <h3 id="latestDescription">aboutaboutabout</h3>

<div id="latestSub">
     <h4 id="latestSubheading">Insert Project Name</h4>

    <p id="latestSubdescription">Out believe has request not how comfort evident.
        <br>Extremity sweetness difficult behaviour he of.
        <br>With my them if up many.</p>
</div>
<div id="latestIcons">
    <div id="latestOne">
        <img id="latestIcon1" src="http://placehold.it/80" alt ""/>
         <h5 class="latestH5">Design</h5>

        <p class="latestP">Instantly gentleman contained belonging exquisite now direction she ham.</p>
    </div>
    <div id="latestTwo">
        <img id="latestIcon2" src="http://placehold.it/80" alt ""/>tH5">Accuracy & Details</h5>
        <p class="latestP">Its hence ten smile age means. Seven chief sight far point any.</p>
    </div>
    <div id="latestThree">
        <img id="latestIcon3" src="http://placehold.it/80" alt ""/>
         <h5 class="latestH5">Posibilities</h5>

        <p class="latestP">Children me laughing we prospect answered followed.</p>
    </div>
</div>
<div id="latestPhotoDiv">
    <img id="latestphoto" src="http://placehold.it/350" alt />
</div>

  • 0
    Обратите внимание, что теги не являются ключевыми словами. Заполнение списка тегов полными одних и тех же слов, которые есть в вашем вопросе (отзывчивость, изменение размера, элементы), не поможет классифицировать его. Всегда обязательно читайте описания, которые появляются при выборе тегов!
Теги:
responsive-design

2 ответа

0
Лучший ответ

Есть несколько возможных способов сделать это. Вы можете выбрать в соответствии с вашими потребностями

  1. Вы можете использовать медиа-запросы, в которых вы определяете разные таблицы стилей для разных экранов. Это самый используемый способ в настоящее время.
    Sneak Peek: http://css-tricks.com/css-media-queries/ и https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

  2. Вы можете использовать метатег viewport.
    Sneak Peek: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

  3. Вы можете проектировать все в% (жидкость реагирует), но эта часть очень сложна. По моему опыту могу сказать, что создание полного сайта, дающего все в%, очень сложно.

Я предлагаю вам изучить медиа-запрос. Это довольно просто и надежно.

Поделиться
  • 0
    Спасибо, я посмотрю на это. Являются ли медиазапросы специфичными для устройств (т. Е. Используют другую таблицу стилей для мобильных телефонов) или они имеют определенный размер? (т.е. будет использоваться другая таблица стилей при изменении размера окна до определенного размера на компьютере).
  • 0
    это работает с размером :) Вы можете определить min-width max-width и затем CSS для этого
Показать ещё 3 комментария
0

Вам нужно будет взглянуть на медиа-запросы.

Запросы в средствах массовой информации дают вам возможность настроить определенные свойства CSS только на определенные свойства мультимедиа (включая, конечно, размер видового экрана, а также печать, или черно-белое изображение и т.д.).

Многие люди предполагают, что вы начинаете с мобильного подхода, то есть начинаете с применения CSS для мобильных, минимальной версии и применяете медиа-запросы в точках разрыва, когда ваши видовые экраны расширяются, включая ваш CSS:

@media (min-width: 480px){
   /* CSS goes here */
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню