Тёмный

Уроки CSS - Медиа запросы основы. Как сделать адаптивный сайт. 

Web Developer Blog
Подписаться 246 тыс.
Просмотров 134 тыс.
50% 1

В этом уроке css мы поговорим о медиа запросах. Медиа запросы очень важная тема, которой можно придать больше времени для изучения. Это начало вопроса о том как сделать адаптивный сайт своими руками очень просто. Уроки html css с медиа запросами приобретают новый смысл и интерес как у зрителей канала web developer blog так и у ведущего. Теперь вы можете сделать адаптивный сайт. CSS для начинающих дается не очень просто, особенно в css3 добавлено огромное количество свойств.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RU-vid - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

Опубликовано:

 

13 авг 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 185   
@imgladyouasked1132
@imgladyouasked1132 4 года назад
Для старта работы с запросами без углублений, достаточно, суть раскрыта. Спасибо!
@user-vz1gj7ie4q
@user-vz1gj7ie4q 29 дней назад
о господи, спасибо тебе за видео и слава богу что оно мне попалось, весь день сегодня мучилась с проблемой верстки, а оказалось надо было просто поменять местами строчки... у меня даже истерический смех появился когда я поняла что это и было решением проблемы над которой я просидела весь день))) спасибо ещё раз!!!!
@user-rp7sg6eo4b
@user-rp7sg6eo4b Год назад
Спасибо за видос! Рассуждения о том что новички встают в ступор при адаптиве очень к месту)
@user-jv9mk7vu5z
@user-jv9mk7vu5z Год назад
)) я один из них
@SunRam_
@SunRam_ Год назад
Это значит надо просто ширину менять? Типа изображении текста и т.д?😮
@habweb8815
@habweb8815 2 года назад
Спасибо. Учусь верстать, естественно без адаптива всё :) Теперь буду понимать, что и как, что-бы адаптировать свой проект.
@user-lf4qm1od6x
@user-lf4qm1od6x 5 лет назад
Спасибо большое. Все с чувством, с толком, с расстановкой.
@SuprunAlexey
@SuprunAlexey 3 года назад
Спасибо
@adeptussilicium2821
@adeptussilicium2821 Год назад
Полезно. Хорошая иллюстрация. Спасибо!
@yuriypetrik3333
@yuriypetrik3333 2 года назад
Низкий поклон, не реально полностью раскрыт вопрос. Лайк и подписка
@erfox
@erfox Год назад
Отлично объяснили. Столько месяцев я ждал такое видео
@redbeard7010
@redbeard7010 Год назад
Очень доходчиво и по существу👍 . В принципе как-то так )
@dreamernum1792
@dreamernum1792 Год назад
спасибо большое! у тебя лучшие ролики для новичков программистов
@user-cd4hv8it5u
@user-cd4hv8it5u 2 года назад
Чёрт, гениально за 10 минут раскрыто! :)
@olehhavrylenko507
@olehhavrylenko507 5 лет назад
Дякую! Все зрозуміло пояснили.
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@aidasabirova1315
@aidasabirova1315 2 года назад
лучше чем платные курсы спасибо большое
@alexeismoliuc2998
@alexeismoliuc2998 5 месяцев назад
Классно!!! Всё работает, спасибо!!!
@vardanyan9606
@vardanyan9606 4 года назад
все ясно, четко, коротко объяснил. спасибо тебе бро !
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@xu_ux
@xu_ux Год назад
всё предельно понятно, спасибо. как-то так)
@plaksacry
@plaksacry 4 года назад
Спасибо. Очень наглядно и понятно.
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@vadimk3388
@vadimk3388 6 лет назад
Спасибо, все понятно изложено!
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@ProMedved
@ProMedved 10 месяцев назад
Спасибо тебе, ты меня спас!!
@lirk4535
@lirk4535 5 месяцев назад
Колоссальное спасибо!
@user-ze5tp3gu9q
@user-ze5tp3gu9q 3 года назад
Спасибо. Очень понятно объясняешь.
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-eu8wd3rq2o
@user-eu8wd3rq2o Год назад
Спасибо тебе больше, так помог что капец:))))))
@dren9446
@dren9446 3 года назад
Спасибо братан, ты за 2 минуты сказал то, что други рассусоливают умными словами на 10)
@SuprunAlexey
@SuprunAlexey 3 года назад
Андрей Павленко спасибо!!
@Dimasiki168
@Dimasiki168 3 года назад
Очень круто все объяснил и никакой воды
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@saltedcaramel7505
@saltedcaramel7505 2 года назад
Спасибо огромное!
@dzhasikgg1
@dzhasikgg1 7 месяцев назад
очень классно всё рассказал и показал
@killmorgej8431
@killmorgej8431 Год назад
Красава,спасибо всё понятно)
@Dark_._Knight
@Dark_._Knight 6 месяцев назад
Не ну по сути прикольно, я сейчас понял, как мне сделать адаптивную вёрстку
@user-ey7rd9ih4g
@user-ey7rd9ih4g Год назад
зачем здесь margin для input? ты использовал display:flex и теперь примени выравнивание горизонтальное для элемента input
@user-jf2ui2qy1y
@user-jf2ui2qy1y 6 месяцев назад
Вертикальное может
@alaki7377
@alaki7377 3 года назад
Спасибо, брат!
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-no5re7vc3b
@user-no5re7vc3b 8 месяцев назад
Чел спасибо ,все понятно обьяснил
@user-vd9vy3ff8t
@user-vd9vy3ff8t 6 лет назад
Отличнейший пример. Спасибо!
@SuprunAlexey
@SuprunAlexey 6 лет назад
Спасибо! Вы попробовали написать код из примера? Как по мне наглядно технически все показано, хоть и не идеально со стороны дизайна)
@user-vd9vy3ff8t
@user-vd9vy3ff8t 6 лет назад
Главное - изложение сути, оно здесь лаконично.А дизайн в примере - на десятом месте.И даже лайфхак словил...банально конечно(но не для новичка), но узнал как регулировать экран под разные размеры:)) А то целиком окно браузера раньше растягивал и сужал...
@SuprunAlexey
@SuprunAlexey 6 лет назад
Ооо значит посмотрите и остальные видео на моем канале, еще много чего узнаете полезного!
@user-vd9vy3ff8t
@user-vd9vy3ff8t 6 лет назад
Поясните пожалуйста про адаптив. Суть такая, я и на Вебрефе читал и тут abraxabra.ru/blog/prochee/flexbox-and-how-to-do-responsive-sites/ (думал может устаревшая инфа,но в статье написано про флексбокс, а это ведь весьма новое свойство), что(пишу выдержку дословно): Самым первым делом мы должны "уведомить" браузер, что хотим использовать адаптивное представление, в соответствии с которым любой браузер будет открывать страницу в этом режиме, делается это вот таким объявлением между тегами head документа: meta name="viewport" content="width=device-width, initial-scale=1" Такое рекомендуют делать совсем не везде. Вопрос - нужно ли эту строку прописывать для уведомления браузера?Адаптив - это же ведь априори должно быть свойство любого современного сайта... В боевых проектах(анализ чужого кода) я нигде не видел подобной уведомительной строки кода.
@user-vd9vy3ff8t
@user-vd9vy3ff8t 6 лет назад
Так и смотрю,подписался на Ваш канал уже давно.
@ShamanShine-eb2pg
@ShamanShine-eb2pg 7 месяцев назад
Привет. Подскажи, в css лишь один запрос медиа запрос пишется на весь сайт например на мобилу в 320px или нужно делать на каждый контейнер на большом сайте с многими секциями?
@user-iz9is7wm9d
@user-iz9is7wm9d 3 года назад
Спасибо!
@seoonlyRU
@seoonlyRU 2 года назад
палец вверх от вебмастера-профи СЕООНЛИ
@samdev6354
@samdev6354 6 лет назад
еще можно max-width и min-width применят в одном медиа запросе. Это я так что бы новички знали
@hackdread2579
@hackdread2579 4 года назад
не получается( @media screen and (min-width: 411px) and (max-width: 450px) and (orientation: portrait) and (min-height: 823px) and (max-height: 900px){ /*Pixel 2 XL*/ Это только одна основная модель телефона. для более широких абсолютно ничего не могу сделать, для другого размера!
@d313g
@d313g 3 года назад
@@hackdread2579 ну как?
@Herp_B_TaHkE
@Herp_B_TaHkE 2 года назад
Спасибо вам
@andreyer7248
@andreyer7248 3 года назад
Спасибо. Классный канал!
@SuprunAlexey
@SuprunAlexey 3 года назад
Спасибо!!
@endurenzmusic6617
@endurenzmusic6617 4 года назад
спасибо бро !
@takert8061
@takert8061 5 лет назад
Спасибо помог
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@velimirpokhvalenko3297
@velimirpokhvalenko3297 4 года назад
Thank you!!!!!!!!!!!!! You are the best!!!!!!!!
@SuprunAlexey
@SuprunAlexey 4 года назад
Спс
@user-vz3vm8eg3s
@user-vz3vm8eg3s 3 года назад
Ник: руский
@kevinfrankdevid5452
@kevinfrankdevid5452 4 года назад
Супер
@SuprunAlexey
@SuprunAlexey 4 года назад
Спасибо
@chef7371
@chef7371 3 года назад
Даже в 2020 году очень помог!
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-jn5cb4zb7f
@user-jn5cb4zb7f 2 года назад
для понимания как это работает - самое оно)
@VanStabHolme
@VanStabHolme 5 лет назад
красавчик, подписон неглядя
@SuprunAlexey
@SuprunAlexey 5 лет назад
Спасибо!
@kabukijoe99
@kabukijoe99 2 года назад
Спасибо
@user-sc9fk4tx8n
@user-sc9fk4tx8n Год назад
подскажите медиазапросы работают в файле scss?
@andriisivak
@andriisivak 6 лет назад
спасибо за видео. а что это за package для sublime, который так картинки вставляет?
@SuprunAlexey
@SuprunAlexey 6 лет назад
Посмотрите видео о саблайме которое я недавно делал, я там подробно рассказываю! Мне просмотр будет, а вам полезная информация ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HZ4BUcogWCQ.html
@andriisivak
@andriisivak 6 лет назад
спасибо, правда, я не нашел в этом видео ответа на свой вопрос) вероятно, вот github.com/fnkr/ST-FakeIMG#fakeimg-placeholder-snippet-for-sublime-text-2-and-3
@dede6834
@dede6834 4 года назад
Что за заклинание удаляет точки у , без list-style: none; ???
@MatZeBest2
@MatZeBest2 4 года назад
display: inline-block;
@dede6834
@dede6834 4 года назад
@@MatZeBest2, Спасибо, хорошее заклинание.
@user-zv4dc9ho7j
@user-zv4dc9ho7j 2 года назад
Я бы для input сделал свойство alig-items:center; а не margin-top. Так как по итогу правильней было бы сделать ?
@tatianazemliana9550
@tatianazemliana9550 2 года назад
Align-items: baseline
@dimanazdratenko
@dimanazdratenko 6 лет назад
Не пойму, оперируем пикселями, но в современных девайсах их же куча? Екран маленький а пикселями full hd, как быть в такой ситуации?
@nameundef8076
@nameundef8076 5 лет назад
вьюпоинт в помощь
@Aftershockkkk
@Aftershockkkk 5 лет назад
Вьюпорт )
@namelastname1498
@namelastname1498 6 лет назад
Я медиа запросы прописал в конце css так они все равно половину перебивают,например шрифт в header только там можно поменять,что делать?
@dimadembrovky7541
@dimadembrovky7541 4 года назад
рассшерение экрана на компе
@VRazvedkaSPN
@VRazvedkaSPN 4 года назад
Ок. Понятно! А если большой достаточно сайт? Перековыривать все стили смотреть как один стиль влияет на рядом стоящие блоки! Ну типо геморно. Может БутсТрапом проще это делать? Там же указал типо кол, см, мд, хл и норм. Или медиа запрос удобней лучше и актуальней?) И юзают ли бутстрап в связке с медиа?
@u-kob
@u-kob 4 года назад
ТИПО открою тебе секрет - в bootstrap ТИПО так же применяются media queries ТИПО. Скачай и глянь код bootstrap css ТИПО.
@VRazvedkaSPN
@VRazvedkaSPN 4 года назад
@@u-kob Типо объяснил. Типо спасибо!
@yatut4467
@yatut4467 3 года назад
Почему инпут горизонтально выровняли нормально по флексу через justify-content, а вертикально через марджин? Почему не align-items: center; ?
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@resler7ooo118
@resler7ooo118 5 лет назад
Привет Админ. Это на любых больших экранах работает???
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@houston9912
@houston9912 4 года назад
поздновато конечно, но может кто-то ответит А откуда взялись значения в процентах именно для медиа запросов?
@low-levelcode6066
@low-levelcode6066 4 года назад
Значит смотри. Возьмем, к примеру 48%. Известное, что блок родителя - 100%, а значение ширины элемента - 48%, следовательно два элемента займут 96% родителя и останется еще 4% процента на отступы и всякое такое. Если бы взяли 50% для элемента, то получили бы, что у нас они стоят впритирку друг другу. Надеюсь, что объяснил верно и доступно
@PacoOfficial
@PacoOfficial 6 лет назад
советую при верстке использовать медиа запросы от бутстрапа, я вообще примерно только для 3 разрешений меняю стили и верстка смотрится идеально, просто люди могут для каждых 50 пикселей менять стили а это уже бред))
@nameundef8076
@nameundef8076 5 лет назад
в бутстрапе происходит все тоже самое
@pavloskuibida6292
@pavloskuibida6292 4 года назад
Такой вопрос: а как настроить в браузере отображение размеров текущего окна? (Firefox)
@SuprunAlexey
@SuprunAlexey 4 года назад
Для каких целей?
@pavloskuibida6292
@pavloskuibida6292 4 года назад
@@SuprunAlexey ну что бы понимать какой размер у меня окна на текущий момент для медиа запросов.Прохожу твои уроки у тебя браузер отображает, искал у себя не нашел :(
@overcomeaging
@overcomeaging 2 года назад
min-width: 700px означает начиная с 700px или 701px ? То есть это > или >= ? тот же вопрос и про max-width
@SuprunAlexey
@SuprunAlexey 2 года назад
От 700. =
@nkp1sss361
@nkp1sss361 Год назад
начало видео: 8:20
@vadymtsakun3842
@vadymtsakun3842 3 года назад
Можно ли писать медиа запросы в отдельном файле и просто подключить его как обычные стили css через линк?
@SuprunAlexey
@SuprunAlexey 3 года назад
Проще подключить через @import
@vadymtsakun3842
@vadymtsakun3842 3 года назад
@@SuprunAlexey спасибо
@vadymtsakun3842
@vadymtsakun3842 3 года назад
@@SuprunAlexey пытался поискать как правильно использовать импорт, но пока что ничего не нашел. мне не очень нравится что в одном css файле будут хранится стили для адаптации. вопрос посоветуйте где можно ознакомится подробнее как использовать импорт и желательно с примерами т.к в документации конкретно мой пример я найти не смог
@SuprunAlexey
@SuprunAlexey 3 года назад
@@vadymtsakun3842 посмотри у меня видео по анимациями одно из последних, там использовали импорт в примере. А так вот ссылка developer.mozilla.org/en-US/docs/Web/CSS/@import
@vadymtsakun3842
@vadymtsakun3842 3 года назад
@@SuprunAlexey спасибо
@user-lb8lp9tt8r
@user-lb8lp9tt8r 4 года назад
Установил max-width:820px. При уменьшении размера экрана все работает, но на мобильных устройствах сайт просто уменьшается без применения стилей медиа-запроса. Почему так?
@SuprunAlexey
@SuprunAlexey 4 года назад
В чем то допустили ошибку
@user-ix1hk9mm6u
@user-ix1hk9mm6u 3 года назад
Надо прописать в тег это:
@gamer4ik785
@gamer4ik785 3 года назад
а как верстать макет например там указано все в px шрифт и блоки и как их перевести в %?
@detro1821
@detro1821 3 года назад
сам.
@Lemon_xx1
@Lemon_xx1 2 года назад
Чем aside иsection отличаются от div
@nktiam
@nktiam Год назад
Ну в принципе как-то так 🙃
@user-zu9nm7dn7z
@user-zu9nm7dn7z 6 лет назад
Добрый день!Отличный урок.Да и вообще нахожу ваши видео очень интересными и познавательными.А вы могли бы как-то просто глянуть код (я просто сверстал макет,а с медиа не могу разобраться на примере именно того макета)?
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@bohdanlototskyi9175
@bohdanlototskyi9175 6 лет назад
У меня не работает,в консоли показывает что медиа подключена,но кроме нее еще и старый стиль блока,и медиа просто не работает.Я ставил ее в конце цсс файла
@yuriiliso9731
@yuriiliso9731 5 лет назад
создайте другой цсс файл с медиазапросами и подключите его
@igorsivll1806
@igorsivll1806 3 года назад
Ух как быстро все, паузил и перематывал
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-iv3ny5nv7g
@user-iv3ny5nv7g 4 года назад
Ребятки может кто знает в чем дело. Работает медиа запрос только начиная от макс вид 1000px. Ставлю чуть меньше например max-width 999px и медиа запрос не работает. Что делать
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@yaikos1
@yaikos1 3 года назад
а нет ли кода который автоматически будет изменять стили под каждое разрешение?
@user-zq2kj1xs9m
@user-zq2kj1xs9m 3 года назад
Есть, фреймворк для css Bootstrap
@kabulisakov4620
@kabulisakov4620 5 лет назад
вот ничего не понял(( как вы задаете ширину (в процентах)? типо сперва даете 90% потом 70% и 30% и т.д. Вот не пойму как? Это все надо знать наизусть или что? Вот почему я свой сайт ни как не могу сделать адаптивным(((
@kabulisakov4620
@kabulisakov4620 5 лет назад
@Qlink Brin Брат я уже и прочел) но все равно почему то толком не понял всё че к чему(( ибо я тупой((
@ggnebydet7838
@ggnebydet7838 2 года назад
А как делать адаптив на табличной верстке?
@user-jh1zd2ly6d
@user-jh1zd2ly6d 3 года назад
4:40 в пинципе
@MsLadoga
@MsLadoga 6 лет назад
Вот честно - ничего не понял. Обычный монитор сегодня имеет ширину 1920 пикселей. еще недавно смартфоны были 300-800 пикселей и тогда эти медиазапросы работали. Но сегодня планшеты и смартфоны имеют разрешение 1920. Галакси 8 вообще запихал себе 1920 пикселей. И? как медиазапрос можно реализовать для 1920 пикселей? как броузер поймет что это смартфон, а не нормальный экран?
@user-op5cq8nj6m
@user-op5cq8nj6m 5 лет назад
У телефонов свои пиксельные размеры! Приблизительно 4к1 ( 4 пикселя Самсунг равны 1 стандартному пикселю) А теперь посчитай😉
@wladarr5794
@wladarr5794 5 лет назад
Даже если не учитывать предыдущий ответ - какая блин разница была бы при отображении на мониторе в 1920px или на экране планшета с той-же шириной?
@user-cx9bl2gq1s
@user-cx9bl2gq1s 6 лет назад
А как сделать, чтобы сама картинка на странице изменялась в размерах при изменении разрешения экрана? Например, если на мониторе 1920х1080 картинка в полный размер 640х480, то как сделать, чтобы она уменьшилась на меньшем экране, например с разрешением 1024х768 ? Не сдвигалась вниз или куда-то в сторону, а именно уменьшалась пропорционально на странице. Потому что, если задать картинке величину в пикселях или в процентах, то ничего не меняется. То же самое хотелось бы узнать про видео. Как сделать, чтобы видео фрейм с Ютуба был адаптивным и менялся с изменением разрешения экрана (как на самом Ютубе)? И еще - как сделать адаптивным страницы, если при верстке используется сетка (display: grid)? Как сдвигать ячейки сетки при изменении разрешения экрана? Может сделаешь отдельный видеоурок на эту тему?
@SuprunAlexey
@SuprunAlexey 6 лет назад
+web sunsey max-width:100%; да, будет время наверное сделаю видео ещё про адаптив
@maksimometcinskii530
@maksimometcinskii530 5 лет назад
Я может не про то, но если прописать в медиа запросе трансформацию scale до нужного размера?
@kovvanchannel3724
@kovvanchannel3724 3 года назад
Почему то не работает media. Объясните?
@drummerrogservice-
@drummerrogservice- 3 года назад
"В принципе, как-то так..."
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@veganstraightedgemiensk
@veganstraightedgemiensk Год назад
как сделать вместо навигационной панели бургер-кнопку через медиа запрос?
@Sava_chernyshov
@Sava_chernyshov 2 года назад
я в css пишу "@media only screen and (max-width=800px){...}" и нифига, что не так ?
@inglazemusic7803
@inglazemusic7803 2 года назад
знак равно на двоеточие замени
@user-nc2rl8sb3t
@user-nc2rl8sb3t 3 года назад
Не работает inline-block в .post-itm, хотя всё делала как в видео
@collector7209
@collector7209 3 года назад
думаю можно было использовать display: flex
@user-fx4tq3cz2w
@user-fx4tq3cz2w 4 года назад
Всё хорошо и понятно, но можно чуть медленнее переключаться и не гнать так сильно. Сам ненавижу когда разводят "воду" и много умничают, ценю краткость сестру таланта, но хочется иногда сказать Вам: - Аndante!
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@draaamdaaamn8489
@draaamdaaamn8489 Год назад
ахвхва
@septembercult985
@septembercult985 5 лет назад
Не понял: а нафига мудрить с медиазапросами, если в коде уже используется флекс? Флекс же сам умеет переносить колонки в зависимости от размера экрана и умеет растягивать и сжимать элементы на оставшееся пространство? Разве медиазапросы не нужны только для верстки на флоатах для супердревних браузеров? А если юзаешь флекс дак и юзай его по полной без всяких медиазапросов, но и поддерживать только новые браузеры это будут. Ответьте, плес, кто шарит, актуальный же вопрос.
@fmleglrmglrml
@fmleglrmglrml 5 лет назад
Флексы делают все на свое усмотрение, а при помощи медиа ты будешь делать так как тебе нравится, он же показал, был текст при уменьшении страницы справа от картинок ,потом задал медиа запрос что бы придать блоку с текстом значение flex-direction: column ( а был row) т.е он перенес этот текст вниз под картинки, в итоге сделал так как хотел,а не так как указал флекс
@nazariityshkevych9951
@nazariityshkevych9951 5 лет назад
Чем sublime text лучше coda??
@mikhailrypta4779
@mikhailrypta4779 5 лет назад
Sublime text больше подходит для вёрстки
@AnatoliySharov
@AnatoliySharov 5 лет назад
@@mikhailrypta4779 чем же? :)
@axelvermontov6607
@axelvermontov6607 4 года назад
@@AnatoliySharov плагины работают? работают, можно работать . А чебурашки не работают!
@AnatoliySharov
@AnatoliySharov 4 года назад
@@axelvermontov6607какие чебурашки?
@axelvermontov6607
@axelvermontov6607 4 года назад
@@AnatoliySharov Пришёл Чебурашка в фирму устраиваться на работу, заходит к директору: - Скажите, у вас Чебурашки работают? - Работают. Чебурашка развернулся и ушёл. Приходит в другую фирму, заходит к директору: - У вас Чебурашки работают? - Не работают. Чебурашка взял и устроился в эту фирму. Проходит несколько дней. Чебурашка сидит и ничего не делает. Директор спрашивает: - Чебурашка, ты почему не работаешь? - Так вы же сами сказали, что Чебурашки у вас не работают.
@Reagle_eagle
@Reagle_eagle 2 года назад
10:00 там одни противоречия в скзаном ( до 980 пкс он есть , ( после, когда ОНА МЕНЬШЕ) - ее нету ) ,. До это разве не когда она меньше? а у вас ПОСЛЕ - 980пкс - это типа меньше. Ну не выражайтесь такими словосочетаниями . Как Задорнов шутил , Дорогой чай будешь? Да нет наверное.
@slavkomesiah3615
@slavkomesiah3615 5 лет назад
у меня от 1000 пикселей и ниже страница просто отдаляеться
@user-on3ml3ef9f
@user-on3ml3ef9f 4 года назад
Зачем header задавать width: 100% если он по умолчянию будет 100%
@SuprunAlexey
@SuprunAlexey 4 года назад
Не помню что там было
@ukraine_on_fire526
@ukraine_on_fire526 5 лет назад
Давайте посмотрим что получилось: \ Здесь хорошо бы сделать паузу чтоб мы успели переписать код.\ Спасибо.
@Gultseva
@Gultseva 5 лет назад
если очень надо, ставишь видео на паузу и переписываешь, в чем проблема?
@valerakuznetsov
@valerakuznetsov 2 года назад
Спасибо, но можно не так быстро
@karinalo
@karinalo 2 года назад
в настройках можно изменить скорость
@vadimsib3378
@vadimsib3378 5 лет назад
Слишком мало рекламы, нужно больше
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@phoneandroidovich3728
@phoneandroidovich3728 2 года назад
(2:21 дальше не смотрим) т.к screen and (мах-width:768px) ширина экрана будет включительно до 768px, а не до.. Лучше материал знать надо, прежде чем ролик пилить
@TinTaBraSS777
@TinTaBraSS777 3 года назад
это все делается джава скриптом )
@TO-un2yj
@TO-un2yj 3 года назад
TinTaBraSS777 по конкретнее как?)
@TinTaBraSS777
@TinTaBraSS777 3 года назад
0 TO 100 джава отслеживает размер экрана и меняет настройк си эс эс !? чего спрашиваеш или ты незнаеш как ?
@dim3143
@dim3143 3 года назад
Это всё равно что молотком шурупы забивать. Для разных целей придуманы разные инструменты. Конкретно за стили отвечает css. JS может более сложную логику с ветвлением добавлять, чем простое изменение паддингов и маржинов в зависимости от размера экрана)
@TinTaBraSS777
@TinTaBraSS777 3 года назад
@@dim3143 ну что за бред !? это си эс эс и есть молоток он даже кувалда самая идеальная настройка верстки размера страницы под экран делается только жабой скрипт а си эс эс та еще кувалда
@dim3143
@dim3143 3 года назад
@@TinTaBraSS777 Это говорит лишь о том, что ты не умеешь в медиазапросы CSS и миксины(для scss) именно там прописываются в зависимости от размера экрана все свойства css
@topsy_kreds
@topsy_kreds 2 года назад
8 из 10 минут верстка макета, почему? Тема видео же медиазапросы, значит им надо больше времени уделять, тема раскрыта слабо, минус
@mysampblogs448
@mysampblogs448 4 года назад
Слишком много екламы
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@Sansanchick
@Sansanchick 4 года назад
Зачем какие-то медиа запросы?! крути одну рекламу!!!
@oksanakuzlo7875
@oksanakuzlo7875 3 года назад
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-mu8mt9jv7s
@user-mu8mt9jv7s 2 года назад
быстро тараторишь.
@user-xu1fc8jt5u
@user-xu1fc8jt5u 4 года назад
ты че так быстро все тороторишь ты в этом виде хочешь людям что-то объяснить или похвастаться. Смотрите все как я быстро всё это делаю. И абсолютно каждому все понято, а не только "задротам" верстки.
@user-kz5go4mp8w
@user-kz5go4mp8w 4 года назад
А скорость видео уменьшить не можешь?)
Далее
Joystick vs Rossetto #scenette #commedia
00:21
Просмотров 22 тыс.
CSS3 #22 Медиазапросы (Media queries)
8:19
How to Set Up Local Web Server on macOS Big Sur
1:03
Как работают CSS Container Queries ?
11:09
Просмотров 3,6 тыс.