Люди добрые помогите прошу вас !!!

[Coder-vasya]

Помогите сделать сужающуюся строку поиска. Как на ya.ru при уменьшении окна браузера.

Когда окно будет меньше 1024 пикселей.

@media screen and (max-width:1024px)Что тут написать ??? что только не пробовал , не могу добиться эффекта. Все уезжает , все разъезжается )))

У меня задание скопировать яндекс и чтобы при размере менее 1024 пикселей он приобретал вид ya.ru.

 

 

Edited June 28, 2017 by Coder-vasya

[AlexZaw]

@media screen and (max-width: 1024px){
    .search{width: 500px}
    .wsearch{width: 500px}
}

вот правильные запросы, только при абсолютном позиционировании они не спасут.

и я так и не понял, как должна выглядеть страница при ширине 1024 пикселя, в чем отличие того что есть у вас и ya.ru, ну кроме кнопки найти

[Евгений_SB]

Извините можно вопрос) @media screen and это у вас класс такой?

[Coder-vasya]

Нет это медиа-запрос. Классы здесь search и wsearch

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

 

8 часов назад, AlexZaw сказал:

@media screen and (max-width: 1024px){
    .search{width: 500px}
    .wsearch{width: 500px}
}

вот правильные запросы, только при абсолютном позиционировании они не спасут.

и я так и не понял, как должна выглядеть страница при ширине 1024 пикселя, в чем отличие того что есть у вас и ya.ru, ну кроме кнопки найти

Страница изначально выглядит 1 в 1 как yandex,ru. А при уменьшении экрана должна выглядеть как ya.ru. Просто я из всего кода выдрал только строку поиска, не стал весь код страницы добавлять сюда. Я так и думал что все зависит от позиционирования. Значит ставлю относительное позиционирование ? С позиционированием у меня проблемы , не до конца понял когда лучше использовать абсолютное и относительное.

Edited June 29, 2017 by Coder-vasya

[pichs_up]

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

 

Edited June 30, 2017 by pichs_up

[Coder-vasya]

В 30.06.2017 в 22:45, pichs_up сказал:

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

 

Спасибо огромное !!! вы шаолинь