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

151 ratings | 2687 views


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

В этом уроке css мы поговорим о медиа запросах. Медиа запросы очень важная тема, которой можно придать больше времени для изучения. Это начало вопроса о том как сделать адаптивный сайт своими руками очень просто. Уроки html css с медиа запросами приобретают новый смысл и интерес как у зрителей канала web developer blog так и у ведущего. Теперь вы можете сделать адаптивный сайт. CSS для начинающих дается не очень просто, особенно в css3 добавлено огромное количество свойств. ======================================================== ПОДПИШИСЬ на канал Web Developer Blog - И не пропускай новые видео!!! ======================================================== ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - Основы JavaScript - Уроки Bootstrap 4 - Уроки Framework для верстки Foundation 6 - Рубрика Основы за 10 минут - Верстка сайта на Foundation 6 - Основы препроцессора SASS - Уроки по Sublime text 3 - Видео про заработок на YouTube - Создаем интернет магазин на PrestaShop - Уроки jQuery - ======================================================== ПОДПИШИСЬ на Группу Вконтакте Web Developer Blog - ========================================================

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

web sunsey 2 months ago
А будто сделать, чтоб сама картина на страничке изменялась в размерах при изменении разрешения экрана? Например, если на мониторе 1920х1080 картина в целый размер 640х480, то будто сделать, чтоб она уменьшилась на наименьшем экране, к примеру с разрешением 1024х768 ? Не двигалась книзу либо куда-то в сторону, а конкретно уменьшалась пропорционально на страничке. Потому что, если задать картинке величину в пикселях либо в процентах, то ничего не изменяется. То же самое хотелось бы выяснить про видео. Как сделать, чтоб видео фрейм с Ютуба был адаптивным и изменялся с конфигурацией разрешения экрана (будто на самом Ютубе)? И еще - будто сделать адаптивным странички, если при верстке употребляется сетка (display: grid)? Как сдвигать ячейки сетки при изменении разрешения экрана? Может сделаешь отдельный видеоурок на эту тему?
Web Developer Blog 2 months ago
+web sunsey max-width:100%; конечно, будет пора наверняка сделаю видео ещё про адаптив
MsLadoga 3 months ago
Вот честно - ничего не сообразил. Обычный монитор сейчас имеет ширину 1920 пикселей. еще не так давно телефоны были 300-800 пикселей и тогда эти медиазапросы работали. Но сейчас планшеты и телефоны имеют позволение 1920. Галакси 8 вообщем запихал для себя 1920 пикселей. И? будто медиазапрос можно воплотить для 1920 пикселей? будто броузер усвоит что это телефон, а не обычный экран?
Дима Наздратенко 5 months ago
Не усвою, оперируем пикселями, однако в современных аксессуарах их же груда? Екран небольшой а пикселями full hd, будто быть в таковой ситуации?
Olek 5 months ago
кушать вроде такая херня будто meta name= viewport , однако не уверен что этим можно воспользоваться
Самат Калауов 5 months ago
еще можно max-width и min-width применят в одном медиа запросе. Это я этак что бы новенькие знали
MkiP 5 months ago
Добрый денек!Отличный задание.Да и вообщем нахожу ваши видео весьма увлекательными и познавательными.А вы могли бы будто-то попросту взглянуть код (я попросту сверстал макет,а с медиа не могу разобраться на примере конкретно того макета)?
Тилек Ашимакунов 5 months ago
Самые наилучшие уроки про программированию!!!
Paco Official 5 months ago
советую при верстке использовать медиа требования от бутстрапа, я вообщем приблизительно лишь для 3 разрешений меняю стили и верстка смотрится совершенно, попросту люд могут для каждых 50 пикселей поменять стили а это уже абсурд))
Andrii Sivak 5 months ago
благодарю за видео. а что это за package для sublime, какой этак рисунки вставляет?
Andrii Sivak 5 months ago
благодарю, истина, я не отыскал в этом видео ответа на собственный проблема) возможно, вот fakeimg-placeholder-snippet-for-sublime-text-2-and-3
Web Developer Blog 5 months ago
Посмотрите видео о саблайме которое я не так давно делал, я там тщательно рассказываю! Мне просмотр будет, а вам нужная информация
Новый Президент России 2018 5 months ago
Отличнейший образец. Спасибо!
Новый Президент России 2018 5 months ago
Так и смотрю,подписался на Ваш канал уже издавна.
Новый Президент России 2018 5 months ago
Поясните изволь про адаптив. Суть такая, я и на Вебрефе читал и здесь (задумывался может устаревшая инфа,однако в статье написано про флексбокс, а это ведь очень новое свойство), что(пишу выдержку буквально): Самым первым делом мы должны уведомить браузер, что желаем использовать адаптивное понятие, в согласовании с которым хоть какой браузер будет обнаруживать страничку в этом режиме, делается это вот таким объявлением меж тегами head документа: meta name= viewport content= width=device-width, initial-scale=1 Такое советуют мастерить совершенно не всюду. Вопрос - необходимо ли эту строчку прописывать для извещения браузера?Адаптив - это же ведь априори надлежит быть свойство хоть какого современного веб-сайта. В боевых проектах(разбор чужого кода) я нигде не лицезрел схожей уведомительной строчки кода.
Web Developer Blog 5 months ago
Ооо означает поглядите и другие видео на моем канале, еще немало чего узнаете полезного!
Новый Президент России 2018 5 months ago
Главное - изложение сущности, оно тут лаконически.А дизайн в примере - на десятом месте.И даже лайфхак словил.обыденно естественно(однако не для новенького), однако вызнал будто регулировать экран под различные размеры:)) А то полностью окно браузера ранее растягивал и сузивал.
Web Developer Blog 5 months ago
Спасибо! Вы попробовали написать код из примера? Как по мне наглядно на техническом уровне все показано, хоть и не совершенно со стороны дизайна)
SlavaDobriy 5 months ago
Хорошо. А если на телефоне позволение экрана 1080х1920? У меня веб-сайт на нем будет отображаться будто на рабочем столе? Либо мобильный браузер будет будто-то поменять соотношение ?
SlavaDobriy 5 months ago
Спасибо за наводку, отыскал сайтик увлекательный
SlavaDobriy 5 months ago
к примеру айфон 6 плюс
Devliner 5 months ago
Хочу отметить, что для того, чтоб получить то, что делает создатель комментария, необходимо играть мета-тегом viewport , какой прописывается в head веб-сайта и задаёт scaling. При задании initial-scale=1 пиксель десктопного монитора не будет отвечать пикселю монитора телефона в буквальном осознании. Собственно, адаптивная верстка в принципе делается в паре с неотклонимой установкой тега viewport. Пример тега: <meta name= viewport content= width=device-width, initial-scale=1.0 > Его установка решает огромное количество вопросов. Надеюсь, нормально растолковал.
Web Developer Blog 5 months ago
А где вы лицезрели мобильное конструкция с такими размерами ширины и высоты экрана?=) Медиа запрос меняет стили в зависимости от ширины экрана, которые вы зададите. Если вы зададите ширину экрана мобильного устройства преднамеренно, там и обменяются стили.
SlavaDobriy 5 months ago
Вот и какой тогда резон в данном медиа запросе, если на мобильном устройстве он ничего не меняет? Мне это не понятно. Что необходимо сделать, чтоб на нем все смотрелось благопристойно
Nicolay 5 months ago
Спасибо за достойные внимания уроки! А будто верно распечатывать HTML+CSS в формате А4? Это в особенности необходимо когда мы сделали формуляр к примеру.
Nicolay 5 months ago
Спасибо!
Devliner 5 months ago
Если желаете верстать веб-сайт этак, чтоб он приемлемо смотрелся при его печати принтером, то можно для этого сделать отдельную таблицу стилей: <link rel= stylesheet media= print type= text/css href= /styles-printer.css /> Обратите внимание на атрибут media.
Web Developer Blog 5 months ago
Спасибо за комментарий! Я по вашему вопросу ничего не могу отозваться. Ни разу не распечатывал.
Евгений Полищук 5 months ago
Совет, в саблайме можно дублировать строчку с помощью ctrl + shift + D, весьма комфортно и не необходимо копипастить)
Web Developer Blog 5 months ago
Конечно