Как я могу сделать этот логотип, слоган и видео адаптивным?

0

Вот jsfiddle: http://jsfiddle.net/xibalbian/L4znJ/

Я пытаюсь вставить случайное видео и хочу сделать его отзывчивым.

<div id="full-video">
<div class="fullvid">
<div class="video" style="margin-left:16.25em;">
    <iframe width="840" height="480" src="//www.youtube.com/embed/WeYsTmIzjkw?rel=0" frameborder="0" allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe></div>
</div>
</div>

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

  • 0
    Что вы пробовали? Судя по всему, вы не знакомы с адаптивным веб-дизайном. Вы должны изучить адаптивный веб-учебник, чтобы знать основы настройки сайта.
  • 0
    Вот почему я пытаюсь сделать это, чтобы научиться.
Показать ещё 1 комментарий
Теги:

2 ответа

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

Пример: http://jsfiddle.net/LFpU5/

Пользовательское редактирование HTML:

<div class="video" style="margin-left:16.25em;">

Для:

<div class="video margin">

Поддержка CSS:

.margin {margin-left:16.25em;}

@media only screen and (max-width: 480px) {
    .margin {margin-left:0;}
    .logo {
        float: none;
        width: auto;
    }
    .banner {
        width: auto;
    }
    .video iframe,
    .video object,
    .video embed {
        width: 100%;
        height: auto;
        display:block;
    }
}
Поделиться
0

Я бы избавился от поля в #video и удалил атрибуты width/height из iframe. width = "840" height = "480" и заменить что-то вроде ниже, оно должно быть отзывчивым

style = "display: inline-block; width: 100%; min-height: 250px;"

В отношении шрифта, если вы загружаете шрифт и размещаете его самостоятельно, вам нужно будет включить некоторые настройки в htaccess, см. Этот пост. Градиенты SVG не работают

Более простой вариант - использовать шрифт на https://www.google.com/fonts, тогда вам не нужно беспокоиться о каком-либо материале сервера.

Поделиться
  • 0
    Спасибо за вашу помощь! Я сделал это здесь: jsfiddle.net/xibalbian/tqVLX Но теперь он весь шириной, а высота всегда 250px. Все еще не то, чего я хочу достичь. Я не хочу, чтобы он был широким, я просто хочу выровнять его вертикально посередине и шириной 700-750 пикселей.

Ещё вопросы

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