Ответы на вопросы о размещении

Question

Я хочу построить этот сайт: http://www.alsite.com.br/misskessi отзывчивый ... но у меня есть некоторые сомнения относительно отзывчивого формата.

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

пример: по моему разрешению (1600 x 900) это прекрасно работает:

#wrap{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-495px; 
    margin-top:-359.5px; 
    width:990px; 
    height:719px; 
    background-color: rgba(247, 8, 8, 0.2); 
} 

но на разрешении 1024x768, появляется скроллбары ... поэтому мне нужно реагировать это ...

, но как?

Может ли кто-нибудь мне помочь?

Answer 1

Я надеюсь, что на этот раз я ответить на вопрос о том, адаптивном дизайне вопрос не будет удален;)

Существует разница между адаптивным дизайном и процентами.
Если вы хотите пойти на проценты, вы должны добавить их в каждую точку. В настоящее время вы сосредоточены на экране, но ваша ширина, высота и поля фиксированы (в логическом, а не в режиме css). Вам также придется изменить их на процентные значения. Чтобы изображение не доходило до большого, вы должны проверить свойства max-height/min-height (так же, как и для ширины, слева и т. Д.).

Кроме того, это не очень отзывчиво, чтобы сделать ваш сайт отзывчивым и адаптивным даже к очень маленьким браузеры вы должны проверить media queries (http://css-tricks.com/css-media-queries/ и https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). Эти два сайта мне очень помогли, когда мне пришлось создать отзывчивый веб-сайт за последние недели (http://wywy.tv/howimetyourmother).

С медиа запросами вы можете изменить ваши классы CSS, если различные условия fullfilled, большинство раз ширины экрана, поставив это в CSS-коде, например:

@media (max-width: 755px) { 
    .content { 
    width: 100%; 
    } 
    .header { 
    margin: 0 auto; 
    } 
    ... 
} 

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

Answer 2

Вы можете сделать изображение фоном и использовать «background-size: cover;», который масштабирует его до размера браузера.

Answer 3

Вот несколько вещей, которые следует иметь в виду при создании реагирующих сайтов.

1. Используйте Media Queries для определения важных точек останова в рамках вашего дизайна. Некоторые общие точки останова: < 320px, < 480px, < 768px,> 768px и выше.

2. Сделайте свой макет жидкостью. Вы можете использовать систему сетки, если это помогает - 960 Grid System, Gridset, Columnal, Golden GS и т. Д.

3. Изображения должны быть установлены на 100% с максимальной шириной. Используйте также точки останова - вы можете изменить положение изображений в зависимости от ваших разных точек разрыва. При работе с мобильными макетами сохраняйте только основные изображения и скрывайте бесполезные (не важные).

4. Использовать максимальную ширину/высоту и минимальную ширину/высоту. Они очень полезны, поскольку он позволяет вам определить «самую низкую и самую высокую» ширину/высоту в нескольких маленьких символах.

5. Для мобильных макетов сделайте свои столбцы на 100% шириной. В основном вы будете использовать один столбец, который будет полностью опущен. Медиа-запрос, который вы будете использовать для этого, предназначен для чего угодно < 320 пикселей.

6. Как я сказал выше - Храните только основное содержание. На вашем более крупном макете (> 768-1024 +) вы можете использовать свои необычные изображения, но под этим убедитесь, что вы считаете контент первым и фантастическим. Это особенно важно для мобильных макетов.

7. Держите макет простой

8. Не забудьте видовых мета-тег.

   < мета имя = "вьюпорт" содержание = "ширина = устройство ширины">