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

315 ratings | 7563 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 - Медиа запросы основы. Как сделать адаптивный сайт.

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