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

  Рет қаралды 133,743

Web Developer Blog

Web Developer Blog

6 жыл бұрын

В этом уроке 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
Видео про заработок на KZfaq - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================

Пікірлер: 185
@imgladyouasked1132
@imgladyouasked1132 4 жыл бұрын
Для старта работы с запросами без углублений, достаточно, суть раскрыта. Спасибо!
@user-vz1gj7ie4q
@user-vz1gj7ie4q Ай бұрын
о господи, спасибо тебе за видео и слава богу что оно мне попалось, весь день сегодня мучилась с проблемой верстки, а оказалось надо было просто поменять местами строчки... у меня даже истерический смех появился когда я поняла что это и было решением проблемы над которой я просидела весь день))) спасибо ещё раз!!!!
@habweb8815
@habweb8815 2 жыл бұрын
Спасибо. Учусь верстать, естественно без адаптива всё :) Теперь буду понимать, что и как, что-бы адаптировать свой проект.
@user-rp7sg6eo4b
@user-rp7sg6eo4b Жыл бұрын
Спасибо за видос! Рассуждения о том что новички встают в ступор при адаптиве очень к месту)
@user-jv9mk7vu5z
@user-jv9mk7vu5z Жыл бұрын
)) я один из них
@SunRam_
@SunRam_ Жыл бұрын
Это значит надо просто ширину менять? Типа изображении текста и т.д?😮
@user-lf4qm1od6x
@user-lf4qm1od6x 5 жыл бұрын
Спасибо большое. Все с чувством, с толком, с расстановкой.
@SuprunAlexey
@SuprunAlexey 3 жыл бұрын
Спасибо
@adeptussilicium2821
@adeptussilicium2821 Жыл бұрын
Полезно. Хорошая иллюстрация. Спасибо!
@yuriypetrik3333
@yuriypetrik3333 2 жыл бұрын
Низкий поклон, не реально полностью раскрыт вопрос. Лайк и подписка
@alexeismoliuc2998
@alexeismoliuc2998 5 ай бұрын
Классно!!! Всё работает, спасибо!!!
@erfox
@erfox Жыл бұрын
Отлично объяснили. Столько месяцев я ждал такое видео
@aidasabirova1315
@aidasabirova1315 2 жыл бұрын
лучше чем платные курсы спасибо большое
@user-cd4hv8it5u
@user-cd4hv8it5u 2 жыл бұрын
Чёрт, гениально за 10 минут раскрыто! :)
@dreamernum1792
@dreamernum1792 Жыл бұрын
спасибо большое! у тебя лучшие ролики для новичков программистов
@lirk4535
@lirk4535 6 ай бұрын
Колоссальное спасибо!
@redbeard7010
@redbeard7010 Жыл бұрын
Очень доходчиво и по существу👍 . В принципе как-то так )
@ProMedved
@ProMedved 10 ай бұрын
Спасибо тебе, ты меня спас!!
@olehhavrylenko507
@olehhavrylenko507 5 жыл бұрын
Дякую! Все зрозуміло пояснили.
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@vardanyan9606
@vardanyan9606 4 жыл бұрын
все ясно, четко, коротко объяснил. спасибо тебе бро !
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@dzhasikgg1
@dzhasikgg1 8 ай бұрын
очень классно всё рассказал и показал
@xu_ux
@xu_ux Жыл бұрын
всё предельно понятно, спасибо. как-то так)
@vadimk3388
@vadimk3388 6 жыл бұрын
Спасибо, все понятно изложено!
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@plaksacry
@plaksacry 4 жыл бұрын
Спасибо. Очень наглядно и понятно.
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@Dimasiki168
@Dimasiki168 3 жыл бұрын
Очень круто все объяснил и никакой воды
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-eu8wd3rq2o
@user-eu8wd3rq2o Жыл бұрын
Спасибо тебе больше, так помог что капец:))))))
@saltedcaramel7505
@saltedcaramel7505 2 жыл бұрын
Спасибо огромное!
@user-ze5tp3gu9q
@user-ze5tp3gu9q 3 жыл бұрын
Спасибо. Очень понятно объясняешь.
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-no5re7vc3b
@user-no5re7vc3b 8 ай бұрын
Чел спасибо ,все понятно обьяснил
@killmorgej8431
@killmorgej8431 Жыл бұрын
Красава,спасибо всё понятно)
@Dark_._Knight
@Dark_._Knight 7 ай бұрын
Не ну по сути прикольно, я сейчас понял, как мне сделать адаптивную вёрстку
@user-ey7rd9ih4g
@user-ey7rd9ih4g Жыл бұрын
зачем здесь margin для input? ты использовал display:flex и теперь примени выравнивание горизонтальное для элемента input
@user-jf2ui2qy1y
@user-jf2ui2qy1y 6 ай бұрын
Вертикальное может
@seoonlyRU
@seoonlyRU 2 жыл бұрын
палец вверх от вебмастера-профи СЕООНЛИ
@dren9446
@dren9446 3 жыл бұрын
Спасибо братан, ты за 2 минуты сказал то, что други рассусоливают умными словами на 10)
@SuprunAlexey
@SuprunAlexey 3 жыл бұрын
Андрей Павленко спасибо!!
@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 ну как?
@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 жыл бұрын
Так и смотрю,подписался на Ваш канал уже давно.
@user-jn5cb4zb7f
@user-jn5cb4zb7f 2 жыл бұрын
для понимания как это работает - самое оно)
@andreyer7248
@andreyer7248 3 жыл бұрын
Спасибо. Классный канал!
@SuprunAlexey
@SuprunAlexey 3 жыл бұрын
Спасибо!!
@user-iz9is7wm9d
@user-iz9is7wm9d 3 жыл бұрын
Спасибо!
@alaki7377
@alaki7377 3 жыл бұрын
Спасибо, брат!
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@Herp_B_TaHkE
@Herp_B_TaHkE 3 жыл бұрын
Спасибо вам
@kabukijoe99
@kabukijoe99 2 жыл бұрын
Спасибо
@nkp1sss361
@nkp1sss361 Жыл бұрын
начало видео: 8:20
@chef7371
@chef7371 3 жыл бұрын
Даже в 2020 году очень помог!
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@ShamanShine-eb2pg
@ShamanShine-eb2pg 7 ай бұрын
Привет. Подскажи, в css лишь один запрос медиа запрос пишется на весь сайт например на мобилу в 320px или нужно делать на каждый контейнер на большом сайте с многими секциями?
@endurenzmusic6617
@endurenzmusic6617 4 жыл бұрын
спасибо бро !
@velimirpokhvalenko3297
@velimirpokhvalenko3297 4 жыл бұрын
Thank you!!!!!!!!!!!!! You are the best!!!!!!!!
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Спс
@user-vz3vm8eg3s
@user-vz3vm8eg3s 3 жыл бұрын
Ник: руский
@kevinfrankdevid5452
@kevinfrankdevid5452 4 жыл бұрын
Супер
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Спасибо
@takert8061
@takert8061 5 жыл бұрын
Спасибо помог
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@VanStabHolme
@VanStabHolme 5 жыл бұрын
красавчик, подписон неглядя
@SuprunAlexey
@SuprunAlexey 5 жыл бұрын
Спасибо!
@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
@user-sc9fk4tx8n
@user-sc9fk4tx8n Жыл бұрын
подскажите медиазапросы работают в файле scss?
@andriisivak
@andriisivak 6 жыл бұрын
спасибо за видео. а что это за package для sublime, который так картинки вставляет?
@SuprunAlexey
@SuprunAlexey 6 жыл бұрын
Посмотрите видео о саблайме которое я недавно делал, я там подробно рассказываю! Мне просмотр будет, а вам полезная информация kzfaq.info/get/bejne/fsBkdbiU1M27c4U.html
@andriisivak
@andriisivak 6 жыл бұрын
спасибо, правда, я не нашел в этом видео ответа на свой вопрос) вероятно, вот github.com/fnkr/ST-FakeIMG#fakeimg-placeholder-snippet-for-sublime-text-2-and-3
@yatut4467
@yatut4467 3 жыл бұрын
Почему инпут горизонтально выровняли нормально по флексу через justify-content, а вертикально через марджин? Почему не align-items: center; ?
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@namelastname1498
@namelastname1498 6 жыл бұрын
Я медиа запросы прописал в конце css так они все равно половину перебивают,например шрифт в header только там можно поменять,что делать?
@dimadembrovky7541
@dimadembrovky7541 4 жыл бұрын
рассшерение экрана на компе
@dimanazdratenko
@dimanazdratenko 6 жыл бұрын
Не пойму, оперируем пикселями, но в современных девайсах их же куча? Екран маленький а пикселями full hd, как быть в такой ситуации?
@nameundef8076
@nameundef8076 5 жыл бұрын
вьюпоинт в помощь
@Aftershockkkk
@Aftershockkkk 5 жыл бұрын
Вьюпорт )
@VRazvedkaSPN
@VRazvedkaSPN 4 жыл бұрын
Ок. Понятно! А если большой достаточно сайт? Перековыривать все стили смотреть как один стиль влияет на рядом стоящие блоки! Ну типо геморно. Может БутсТрапом проще это делать? Там же указал типо кол, см, мд, хл и норм. Или медиа запрос удобней лучше и актуальней?) И юзают ли бутстрап в связке с медиа?
@u-kob
@u-kob 4 жыл бұрын
ТИПО открою тебе секрет - в bootstrap ТИПО так же применяются media queries ТИПО. Скачай и глянь код bootstrap css ТИПО.
@VRazvedkaSPN
@VRazvedkaSPN 4 жыл бұрын
@@u-kob Типо объяснил. Типо спасибо!
@PacoOfficial
@PacoOfficial 6 жыл бұрын
советую при верстке использовать медиа запросы от бутстрапа, я вообще примерно только для 3 разрешений меняю стили и верстка смотрится идеально, просто люди могут для каждых 50 пикселей менять стили а это уже бред))
@nameundef8076
@nameundef8076 5 жыл бұрын
в бутстрапе происходит все тоже самое
@overcomeaging
@overcomeaging 2 жыл бұрын
min-width: 700px означает начиная с 700px или 701px ? То есть это > или >= ? тот же вопрос и про max-width
@SuprunAlexey
@SuprunAlexey 2 жыл бұрын
От 700. =
@houston9912
@houston9912 4 жыл бұрын
поздновато конечно, но может кто-то ответит А откуда взялись значения в процентах именно для медиа запросов?
@low-levelcode6066
@low-levelcode6066 4 жыл бұрын
Значит смотри. Возьмем, к примеру 48%. Известное, что блок родителя - 100%, а значение ширины элемента - 48%, следовательно два элемента займут 96% родителя и останется еще 4% процента на отступы и всякое такое. Если бы взяли 50% для элемента, то получили бы, что у нас они стоят впритирку друг другу. Надеюсь, что объяснил верно и доступно
@nktiam
@nktiam Жыл бұрын
Ну в принципе как-то так 🙃
@user-jh1zd2ly6d
@user-jh1zd2ly6d 3 жыл бұрын
4:40 в пинципе
@resler7ooo118
@resler7ooo118 5 жыл бұрын
Привет Админ. Это на любых больших экранах работает???
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-lb8lp9tt8r
@user-lb8lp9tt8r 4 жыл бұрын
Установил max-width:820px. При уменьшении размера экрана все работает, но на мобильных устройствах сайт просто уменьшается без применения стилей медиа-запроса. Почему так?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
В чем то допустили ошибку
@user-ix1hk9mm6u
@user-ix1hk9mm6u 3 жыл бұрын
Надо прописать в тег это:
@pavloskuibida6292
@pavloskuibida6292 4 жыл бұрын
Такой вопрос: а как настроить в браузере отображение размеров текущего окна? (Firefox)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Для каких целей?
@pavloskuibida6292
@pavloskuibida6292 4 жыл бұрын
@@SuprunAlexey ну что бы понимать какой размер у меня окна на текущий момент для медиа запросов.Прохожу твои уроки у тебя браузер отображает, искал у себя не нашел :(
@bohdanlototskyi9175
@bohdanlototskyi9175 6 жыл бұрын
У меня не работает,в консоли показывает что медиа подключена,но кроме нее еще и старый стиль блока,и медиа просто не работает.Я ставил ее в конце цсс файла
@yuriiliso9731
@yuriiliso9731 5 жыл бұрын
создайте другой цсс файл с медиазапросами и подключите его
@user-zu9nm7dn7z
@user-zu9nm7dn7z 6 жыл бұрын
Добрый день!Отличный урок.Да и вообще нахожу ваши видео очень интересными и познавательными.А вы могли бы как-то просто глянуть код (я просто сверстал макет,а с медиа не могу разобраться на примере именно того макета)?
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@gamer4ik785
@gamer4ik785 3 жыл бұрын
а как верстать макет например там указано все в px шрифт и блоки и как их перевести в %?
@detro1821
@detro1821 3 жыл бұрын
сам.
@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 спасибо
@Lemon_xx1
@Lemon_xx1 2 жыл бұрын
Чем aside иsection отличаются от div
@kabulisakov4620
@kabulisakov4620 5 жыл бұрын
вот ничего не понял(( как вы задаете ширину (в процентах)? типо сперва даете 90% потом 70% и 30% и т.д. Вот не пойму как? Это все надо знать наизусть или что? Вот почему я свой сайт ни как не могу сделать адаптивным(((
@kabulisakov4620
@kabulisakov4620 5 жыл бұрын
@Qlink Brin Брат я уже и прочел) но все равно почему то толком не понял всё че к чему(( ибо я тупой((
@ggnebydet7838
@ggnebydet7838 2 жыл бұрын
А как делать адаптив на табличной верстке?
@igorsivll1806
@igorsivll1806 3 жыл бұрын
Ух как быстро все, паузил и перематывал
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@yaikos1
@yaikos1 3 жыл бұрын
а нет ли кода который автоматически будет изменять стили под каждое разрешение?
@user-zq2kj1xs9m
@user-zq2kj1xs9m 3 жыл бұрын
Есть, фреймворк для css Bootstrap
@user-iv3ny5nv7g
@user-iv3ny5nv7g 4 жыл бұрын
Ребятки может кто знает в чем дело. Работает медиа запрос только начиная от макс вид 1000px. Ставлю чуть меньше например max-width 999px и медиа запрос не работает. Что делать
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@kovvanchannel3724
@kovvanchannel3724 3 жыл бұрын
Почему то не работает media. Объясните?
@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 до нужного размера?
@drummerrogservice-
@drummerrogservice- 3 жыл бұрын
"В принципе, как-то так..."
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@user-fx4tq3cz2w
@user-fx4tq3cz2w 4 жыл бұрын
Всё хорошо и понятно, но можно чуть медленнее переключаться и не гнать так сильно. Сам ненавижу когда разводят "воду" и много умничают, ценю краткость сестру таланта, но хочется иногда сказать Вам: - Аndante!
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@draaamdaaamn8489
@draaamdaaamn8489 Жыл бұрын
ахвхва
@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
@septembercult985
@septembercult985 5 жыл бұрын
Не понял: а нафига мудрить с медиазапросами, если в коде уже используется флекс? Флекс же сам умеет переносить колонки в зависимости от размера экрана и умеет растягивать и сжимать элементы на оставшееся пространство? Разве медиазапросы не нужны только для верстки на флоатах для супердревних браузеров? А если юзаешь флекс дак и юзай его по полной без всяких медиазапросов, но и поддерживать только новые браузеры это будут. Ответьте, плес, кто шарит, актуальный же вопрос.
@fmleglrmglrml
@fmleglrmglrml 5 жыл бұрын
Флексы делают все на свое усмотрение, а при помощи медиа ты будешь делать так как тебе нравится, он же показал, был текст при уменьшении страницы справа от картинок ,потом задал медиа запрос что бы придать блоку с текстом значение flex-direction: column ( а был row) т.е он перенес этот текст вниз под картинки, в итоге сделал так как хотел,а не так как указал флекс
@Reagle_eagle
@Reagle_eagle 2 жыл бұрын
10:00 там одни противоречия в скзаном ( до 980 пкс он есть , ( после, когда ОНА МЕНЬШЕ) - ее нету ) ,. До это разве не когда она меньше? а у вас ПОСЛЕ - 980пкс - это типа меньше. Ну не выражайтесь такими словосочетаниями . Как Задорнов шутил , Дорогой чай будешь? Да нет наверное.
@slavkomesiah3615
@slavkomesiah3615 5 жыл бұрын
у меня от 1000 пикселей и ниже страница просто отдаляеться
@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 Пришёл Чебурашка в фирму устраиваться на работу, заходит к директору: - Скажите, у вас Чебурашки работают? - Работают. Чебурашка развернулся и ушёл. Приходит в другую фирму, заходит к директору: - У вас Чебурашки работают? - Не работают. Чебурашка взял и устроился в эту фирму. Проходит несколько дней. Чебурашка сидит и ничего не делает. Директор спрашивает: - Чебурашка, ты почему не работаешь? - Так вы же сами сказали, что Чебурашки у вас не работают.
@user-on3ml3ef9f
@user-on3ml3ef9f 4 жыл бұрын
Зачем header задавать width: 100% если он по умолчянию будет 100%
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Не помню что там было
@vadimsib3378
@vadimsib3378 5 жыл бұрын
Слишком мало рекламы, нужно больше
@oksanakuzlo7875
@oksanakuzlo7875 3 жыл бұрын
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
@valerakuznetsov
@valerakuznetsov 2 жыл бұрын
Спасибо, но можно не так быстро
@karinalo
@karinalo 2 жыл бұрын
в настройках можно изменить скорость
@phoneandroidovich3728
@phoneandroidovich3728 2 жыл бұрын
(2:21 дальше не смотрим) т.к screen and (мах-width:768px) ширина экрана будет включительно до 768px, а не до.. Лучше материал знать надо, прежде чем ролик пилить
@ukraine_on_fire526
@ukraine_on_fire526 5 жыл бұрын
Давайте посмотрим что получилось: \ Здесь хорошо бы сделать паузу чтоб мы успели переписать код.\ Спасибо.
@Gultseva
@Gultseva 5 жыл бұрын
если очень надо, ставишь видео на паузу и переписываешь, в чем проблема?
@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 жыл бұрын
А скорость видео уменьшить не можешь?)
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Рет қаралды 1 МЛН
CSS3 #22 Медиазапросы (Media queries)
8:19
webDev
Рет қаралды 33 М.
CSS функция clamp(). Адаптивный размер текста. Прощайте медиазапросы
12:04
ВебКадеми | Юрий Ключевский
Рет қаралды 11 М.
Интенсивный курс адаптивная верстка сайта за 15 минут! html css
16:13
Обучение HTML, CSS, JavaScript | Анатолий Ивашов
Рет қаралды 49 М.