Уроки CSS - Медиа запросы основы. Как сделать адаптивный сайт.
HTML-код
- Опубликовано: 13 авг 2017
- В этом уроке 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
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
![Cordae - Saturday Mornings (feat. Lil Wayne) [Official Music Video]](http://i.ytimg.com/vi/z2GYJua09F0/mqdefault.jpg)
о господи, спасибо тебе за видео и слава богу что оно мне попалось, весь день сегодня мучилась с проблемой верстки, а оказалось надо было просто поменять местами строчки...
у меня даже истерический смех появился когда я поняла что это и было решением проблемы над которой я просидела весь день)))
спасибо ещё раз!!!!
Спасибо за видос! Рассуждения о том что новички встают в ступор при адаптиве очень к месту)
)) я один из них
Это значит надо просто ширину менять? Типа изображении текста и т.д?😮
Для старта работы с запросами без углублений, достаточно, суть раскрыта. Спасибо!
Спасибо. Учусь верстать, естественно без адаптива всё :) Теперь буду понимать, что и как, что-бы адаптировать свой проект.
Спасибо большое. Все с чувством, с толком, с расстановкой.
Спасибо
Полезно. Хорошая иллюстрация. Спасибо!
Низкий поклон, не реально полностью раскрыт вопрос. Лайк и подписка
Отлично объяснили. Столько месяцев я ждал такое видео
Дякую! Все зрозуміло пояснили.
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Чёрт, гениально за 10 минут раскрыто! :)
Спасибо братан, ты за 2 минуты сказал то, что други рассусоливают умными словами на 10)
Андрей Павленко спасибо!!
все ясно, четко, коротко объяснил. спасибо тебе бро !
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
спасибо большое! у тебя лучшие ролики для новичков программистов
Спасибо, все понятно изложено!
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Спасибо. Очень наглядно и понятно.
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Очень доходчиво и по существу👍 . В принципе как-то так )
лучше чем платные курсы
спасибо большое
Не ну по сути прикольно, я сейчас понял, как мне сделать адаптивную вёрстку
Классно!!! Всё работает, спасибо!!!
Спасибо тебе, ты меня спас!!
Спасибо. Очень понятно объясняешь.
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Колоссальное спасибо!
Очень круто все объяснил и никакой воды
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Спасибо тебе больше, так помог что капец:))))))
очень классно всё рассказал и показал
палец вверх от вебмастера-профи СЕООНЛИ
Красава,спасибо всё понятно)
Спасибо. Классный канал!
Спасибо!!
Спасибо огромное!
Спасибо, брат!
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
всё предельно понятно, спасибо. как-то так)
Отличнейший пример. Спасибо!
Спасибо! Вы попробовали написать код из примера? Как по мне наглядно технически все показано, хоть и не идеально со стороны дизайна)
Главное - изложение сути, оно здесь лаконично.А дизайн в примере - на десятом месте.И даже лайфхак словил...банально конечно(но не для новичка), но узнал как регулировать экран под разные размеры:)) А то целиком окно браузера раньше растягивал и сужал...
Ооо значит посмотрите и остальные видео на моем канале, еще много чего узнаете полезного!
Поясните пожалуйста про адаптив. Суть такая, я и на Вебрефе читал и тут abraxabra.ru/blog/prochee/flexbox-and-how-to-do-responsive-sites/ (думал может устаревшая инфа,но в статье написано про флексбокс, а это ведь весьма новое свойство), что(пишу выдержку дословно):
Самым первым делом мы должны "уведомить" браузер, что хотим использовать адаптивное представление, в соответствии с которым любой браузер будет открывать страницу в этом режиме, делается это вот таким объявлением между тегами head документа:
meta name="viewport" content="width=device-width, initial-scale=1"
Такое рекомендуют делать совсем не везде. Вопрос - нужно ли эту строку прописывать для уведомления браузера?Адаптив - это же ведь априори должно быть свойство любого современного сайта... В боевых проектах(анализ чужого кода) я нигде не видел подобной уведомительной строки кода.
Так и смотрю,подписался на Ваш канал уже давно.
зачем здесь margin для input? ты использовал display:flex и теперь примени выравнивание горизонтальное для элемента input
Вертикальное может
еще можно max-width и min-width применят в одном медиа запросе. Это я так что бы новички знали
не получается(
@media screen and (min-width: 411px) and (max-width: 450px) and (orientation: portrait) and (min-height: 823px) and (max-height: 900px){ /*Pixel 2 XL*/
Это только одна основная модель телефона. для более широких абсолютно ничего не могу сделать, для другого размера!
@@hackdread2579 ну как?
Спасибо!
красавчик, подписон неглядя
Спасибо!
Даже в 2020 году очень помог!
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Чел спасибо ,все понятно обьяснил
спасибо бро !
Спасибо помог
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Спасибо вам
Супер
Спасибо
Thank you!!!!!!!!!!!!! You are the best!!!!!!!!
Спс
Ник: руский
для понимания как это работает - самое оно)
Спасибо
Я бы для input сделал свойство alig-items:center; а не margin-top. Так как по итогу правильней было бы сделать ?
Align-items: baseline
начало видео: 8:20
Привет. Подскажи, в css лишь один запрос медиа запрос пишется на весь сайт например на мобилу в 320px или нужно делать на каждый контейнер на большом сайте с многими секциями?
Я медиа запросы прописал в конце css так они все равно половину перебивают,например шрифт в header только там можно поменять,что делать?
рассшерение экрана на компе
спасибо за видео. а что это за package для sublime, который так картинки вставляет?
Посмотрите видео о саблайме которое я недавно делал, я там подробно рассказываю! Мне просмотр будет, а вам полезная информация ruclips.net/video/HZ4BUcogWCQ/видео.html
спасибо, правда, я не нашел в этом видео ответа на свой вопрос) вероятно, вот github.com/fnkr/ST-FakeIMG#fakeimg-placeholder-snippet-for-sublime-text-2-and-3
Не пойму, оперируем пикселями, но в современных девайсах их же куча? Екран маленький а пикселями full hd, как быть в такой ситуации?
вьюпоинт в помощь
Вьюпорт )
советую при верстке использовать медиа запросы от бутстрапа, я вообще примерно только для 3 разрешений меняю стили и верстка смотрится идеально, просто люди могут для каждых 50 пикселей менять стили а это уже бред))
в бутстрапе происходит все тоже самое
подскажите медиазапросы работают в файле scss?
поздновато конечно, но может кто-то ответит
А откуда взялись значения в процентах именно для медиа запросов?
Значит смотри. Возьмем, к примеру 48%. Известное, что блок родителя - 100%, а значение ширины элемента - 48%, следовательно два элемента займут 96% родителя и останется еще 4% процента на отступы и всякое такое. Если бы взяли 50% для элемента, то получили бы, что у нас они стоят впритирку друг другу. Надеюсь, что объяснил верно и доступно
Почему инпут горизонтально выровняли нормально по флексу через justify-content, а вертикально через марджин? Почему не align-items: center; ?
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Ну в принципе как-то так 🙃
Что за заклинание удаляет точки у , без list-style: none; ???
display: inline-block;
@@enjoymtx, Спасибо, хорошее заклинание.
Добрый день!Отличный урок.Да и вообще нахожу ваши видео очень интересными и познавательными.А вы могли бы как-то просто глянуть код (я просто сверстал макет,а с медиа не могу разобраться на примере именно того макета)?
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
У меня не работает,в консоли показывает что медиа подключена,но кроме нее еще и старый стиль блока,и медиа просто не работает.Я ставил ее в конце цсс файла
создайте другой цсс файл с медиазапросами и подключите его
Ух как быстро все, паузил и перематывал
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
"В принципе, как-то так..."
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Привет Админ. Это на любых больших экранах работает???
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Ок. Понятно! А если большой достаточно сайт? Перековыривать все стили смотреть как один стиль влияет на рядом стоящие блоки! Ну типо геморно. Может БутсТрапом проще это делать? Там же указал типо кол, см, мд, хл и норм. Или медиа запрос удобней лучше и актуальней?) И юзают ли бутстрап в связке с медиа?
ТИПО открою тебе секрет - в bootstrap ТИПО так же применяются media queries ТИПО. Скачай и глянь код bootstrap css ТИПО.
@@u-kob Типо объяснил. Типо спасибо!
а как верстать макет например там указано все в px шрифт и блоки и как их перевести в %?
сам.
Вот честно - ничего не понял. Обычный монитор сегодня имеет ширину 1920 пикселей.
еще недавно смартфоны были 300-800 пикселей и тогда эти медиазапросы работали.
Но сегодня планшеты и смартфоны имеют разрешение 1920.
Галакси 8 вообще запихал себе 1920 пикселей.
И?
как медиазапрос можно реализовать для 1920 пикселей?
как броузер поймет что это смартфон, а не нормальный экран?
У телефонов свои пиксельные размеры! Приблизительно 4к1 ( 4 пикселя Самсунг равны 1 стандартному пикселю) А теперь посчитай😉
Даже если не учитывать предыдущий ответ - какая блин разница была бы при отображении на мониторе в 1920px или на экране планшета с той-же шириной?
min-width: 700px означает начиная с 700px или 701px ? То есть это > или >= ?
тот же вопрос и про max-width
От 700. =
Такой вопрос:
а как настроить в браузере отображение размеров текущего окна? (Firefox)
Для каких целей?
@@SuprunAlexey ну что бы понимать какой размер у меня окна на текущий момент для медиа запросов.Прохожу твои уроки у тебя браузер отображает, искал у себя не нашел :(
Установил max-width:820px. При уменьшении размера экрана все работает, но на мобильных устройствах сайт просто уменьшается без применения стилей медиа-запроса. Почему так?
В чем то допустили ошибку
Надо прописать в тег это:
вот ничего не понял(( как вы задаете ширину (в процентах)? типо сперва даете 90% потом 70% и 30% и т.д. Вот не пойму как? Это все надо знать наизусть или что? Вот почему я свой сайт ни как не могу сделать адаптивным(((
@Qlink Brin Брат я уже и прочел) но все равно почему то толком не понял всё че к чему(( ибо я тупой((
Ребятки может кто знает в чем дело. Работает медиа запрос только начиная от макс вид 1000px. Ставлю чуть меньше например max-width 999px и медиа запрос не работает. Что делать
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Можно ли писать медиа запросы в отдельном файле и просто подключить его как обычные стили css через линк?
Проще подключить через @import
@@SuprunAlexey спасибо
@@SuprunAlexey пытался поискать как правильно использовать импорт, но пока что ничего не нашел. мне не очень нравится что в одном css файле будут хранится стили для адаптации.
вопрос посоветуйте где можно ознакомится подробнее как использовать импорт и желательно с примерами т.к в документации конкретно мой пример я найти не смог
@@vadymtsakun3842 посмотри у меня видео по анимациями одно из последних, там использовали импорт в примере. А так вот ссылка developer.mozilla.org/en-US/docs/Web/CSS/@import
@@SuprunAlexey спасибо
4:40 в пинципе
а нет ли кода который автоматически будет изменять стили под каждое разрешение?
Есть, фреймворк для css Bootstrap
А как сделать, чтобы сама картинка на странице изменялась в размерах при изменении разрешения экрана? Например, если на мониторе 1920х1080 картинка в полный размер 640х480, то как сделать, чтобы она уменьшилась на меньшем экране, например с разрешением 1024х768 ? Не сдвигалась вниз или куда-то в сторону, а именно уменьшалась пропорционально на странице. Потому что, если задать картинке величину в пикселях или в процентах, то ничего не меняется. То же самое хотелось бы узнать про видео. Как сделать, чтобы видео фрейм с Ютуба был адаптивным и менялся с изменением разрешения экрана (как на самом Ютубе)? И еще - как сделать адаптивным страницы, если при верстке используется сетка (display: grid)? Как сдвигать ячейки сетки при изменении разрешения экрана? Может сделаешь отдельный видеоурок на эту тему?
+web sunsey max-width:100%; да, будет время наверное сделаю видео ещё про адаптив
Я может не про то, но если прописать в медиа запросе трансформацию scale до нужного размера?
Всё хорошо и понятно, но можно чуть медленнее переключаться и не гнать так сильно. Сам ненавижу когда разводят "воду" и много умничают, ценю краткость сестру таланта, но хочется иногда сказать Вам: - Аndante!
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
ахвхва
А как делать адаптив на табличной верстке?
как сделать вместо навигационной панели бургер-кнопку через медиа запрос?
Чем aside иsection отличаются от div
я в css пишу "@media only screen and (max-width=800px){...}" и нифига, что не так ?
знак равно на двоеточие замени
Не работает inline-block в .post-itm, хотя всё делала как в видео
думаю можно было использовать display: flex
Не понял: а нафига мудрить с медиазапросами, если в коде уже используется флекс? Флекс же сам умеет переносить колонки в зависимости от размера экрана и умеет растягивать и сжимать элементы на оставшееся пространство? Разве медиазапросы не нужны только для верстки на флоатах для супердревних браузеров? А если юзаешь флекс дак и юзай его по полной без всяких медиазапросов, но и поддерживать только новые браузеры это будут. Ответьте, плес, кто шарит, актуальный же вопрос.
Флексы делают все на свое усмотрение, а при помощи медиа ты будешь делать так как тебе нравится, он же показал, был текст при уменьшении страницы справа от картинок ,потом задал медиа запрос что бы придать блоку с текстом значение flex-direction: column ( а был row) т.е он перенес этот текст вниз под картинки, в итоге сделал так как хотел,а не так как указал флекс
10:00 там одни противоречия в скзаном ( до 980 пкс он есть , ( после, когда ОНА МЕНЬШЕ) - ее нету ) ,. До это разве не когда она меньше? а у вас ПОСЛЕ - 980пкс - это типа меньше.
Ну не выражайтесь такими словосочетаниями . Как Задорнов шутил , Дорогой чай будешь? Да нет наверное.
Почему то не работает media. Объясните?
у меня от 1000 пикселей и ниже страница просто отдаляеться
Давайте посмотрим что получилось: \ Здесь хорошо бы сделать паузу чтоб мы успели переписать код.\ Спасибо.
если очень надо, ставишь видео на паузу и переписываешь, в чем проблема?
Зачем header задавать width: 100% если он по умолчянию будет 100%
Не помню что там было
Слишком мало рекламы, нужно больше
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
Чем sublime text лучше coda??
Sublime text больше подходит для вёрстки
@@mikhailrypta4779 чем же? :)
@@AnatoliySharov плагины работают? работают, можно работать . А чебурашки не работают!
@@axelvermontov6607какие чебурашки?
@@AnatoliySharov Пришёл Чебурашка в фирму устраиваться на работу, заходит к директору:
- Скажите, у вас Чебурашки работают?
- Работают.
Чебурашка развернулся и ушёл. Приходит в другую фирму, заходит к
директору:
- У вас Чебурашки работают?
- Не работают.
Чебурашка взял и устроился в эту фирму.
Проходит несколько дней. Чебурашка сидит и ничего не делает.
Директор спрашивает:
- Чебурашка, ты почему не работаешь?
- Так вы же сами сказали, что Чебурашки у вас не работают.
Спасибо, но можно не так быстро
в настройках можно изменить скорость
(2:21 дальше не смотрим) т.к screen and (мах-width:768px) ширина экрана будет включительно до 768px, а не до.. Лучше материал знать надо, прежде чем ролик пилить
это все делается джава скриптом )
TinTaBraSS777 по конкретнее как?)
0 TO 100 джава отслеживает размер экрана и меняет настройк си эс эс !? чего спрашиваеш или ты незнаеш как ?
Это всё равно что молотком шурупы забивать. Для разных целей придуманы разные инструменты. Конкретно за стили отвечает css. JS может более сложную логику с ветвлением добавлять, чем простое изменение паддингов и маржинов в зависимости от размера экрана)
@@dim3143
ну что за бред !?
это си эс эс и есть молоток он даже кувалда
самая идеальная настройка верстки размера страницы под экран
делается только жабой скрипт
а си эс эс та еще кувалда
@@TinTaBraSS777 Это говорит лишь о том, что ты не умеешь в медиазапросы CSS и миксины(для scss) именно там прописываются в зависимости от размера экрана все свойства css
8 из 10 минут верстка макета, почему? Тема видео же медиазапросы, значит им надо больше времени уделять, тема раскрыта слабо, минус
Слишком много екламы
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
быстро тараторишь.
Зачем какие-то медиа запросы?! крути одну рекламу!!!
Привет! Хочешь создать свой сайт? Тогда тебе на neoseo.com.ua
ты че так быстро все тороторишь
ты в этом виде хочешь людям что-то объяснить или похвастаться. Смотрите все как я быстро всё это делаю. И абсолютно каждому все понято, а не только "задротам" верстки.
А скорость видео уменьшить не можешь?)