CSS Tutorial: Media Queries Explained | Web Development Tutorials #30
CSS Tutorial: Media Queries Explained | Web Development Tutorials #30
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0.101 -> Guys in today's video we will learn what is media query
3.07 -> and along with that we'll see examples of media query
6.173 -> so media query is a way to make responsive design for any website
10.911 -> now what is this responsive design
12.813 -> i already told you if you haven't accessed this playlist then you must
17.818 -> and here in video no. 29 i told you about responsive design
21.856 -> now i'll come to main issue of this video i.e media query
25.393 -> to understand media query, lets make a file and name it "tutorial30.html"
32.433 -> "tut30.html"
34.602 -> now first of all lets understand what is this media query in very naive language
40.408 -> so media query is a way, whenever our screen will resize
44.245 -> we will tell that if screen width becomes this
47.481 -> then you have to add some specific CSS in page
52.553 -> that means inject in the page, now lets see how it is done
56.29 -> so i'll write here "media queries" and
61.295 -> obviously create a style here because i have to give style for CSS
66.801 -> and here i'll keep ".box" and i will give "background-color : red"
74.308 -> along with that what i will do
76.31 -> along with giving background color red, i'll give this "color : black" okay
81.782 -> that's all i have done for now and now what i will do is
85.419 -> here "div.box" and add here ids, "box $" and "* 4" okay
96.864 -> i'll write here i am an iPhone
102.203 -> now i'll write here I am a tablet
107.508 -> then i'll write here I am a computer
111.412 -> and then i'll write I am a widescreen computer
116.217 -> now you must be thinking what rubbish i'm writing but now i'll tell you how it is not
122.156 -> i clicked here, see nothing more happened
124.892 -> it shows I am an iPhone, I am a tablet, this things are displayed
128.629 -> i haven't done something big here, i'll do one thing here
132.399 -> i'll increase it's font size, if i make it's font-size 22pixel
137.638 -> so it will look bigger and it will look like this
141.542 -> good, along with that lets make it's "text-align : center", i centered the text-align
147.314 -> see this everything came to center, so i'm an iPhone, i'm a tablet, i'm this, i'm that, no problem
153.554 -> whoever i'm, guys i'll make it more bigger
156.924 -> 72 will be more that enough i know but it's okay for now
160.694 -> for example lets take 72 and lets make it wide, i think it will look nice, yes it is looking good
168.035 -> so if i inspect here and here this button i told you, it is called device toolbar
175.91 -> and this is element selector, so i clicked on device toolbar
179.446 -> and choose responsive here
181.482 -> so if i resize my screen, so it won't add responsive automatically by doing this
187.154 -> now see when i'm resizing my screen nothing happens okay
190.691 -> it is normal, only text is narrowing down
194.028 -> but now see here what i'll do i'll write media query and after writing this i
200.734 -> i'll show you that how to this website, i'll say it a website, i haven't added much markup
206.84 -> but again lets say it is a website, see how will i make it responsive
211.578 -> so here i will make its "display : none;" okay
216.25 -> if i make display none so everything will vanish, you can see nothing
219.62 -> now what i'll do here is add a media query, i'll say
223.457 -> "media" so as soon as i write media here, we have to write @media
228.529 -> and see, i wrote @media, so it automatically suggested me, so i wrote m e d i a here
235.803 -> here by using emmet i can add media query
238.739 -> i'll write here "media" the "only screen", and why i'm writing this is
245.646 -> for now i'll remove only screen talks, i don't want to confuse you
249.283 -> only screen is not a big thing, but now i'll write only media syntax of media query
254.054 -> i wrote here media, and after writing it i'll write here "max-width" and i'll write here "500 px"
263.097 -> and i'll say as soon as this happens, as soon as max-width is 500px
268.168 -> then what you do, block the display of box 1, okay
276.377 -> and see here you won't see anything
279.179 -> but as soon as i make it small, see, you saw?
282.149 -> as soon as i make it small, media query got fired, and after media query fired, i am an iPhone displayed
288.589 -> so it's width here, lets understand the syntax
292.359 -> I said, if you
294.995 -> are between minimum 0 and maximum 500 that means you max width is 500
300.801 -> i haven't specified min, so if your min is 0, so from 0 to 500 wherever you are
306.407 -> your display will be blocked that means being box display will get blocked that means
309.843 -> everything written in this media query will be applied CSS
313.714 -> if this doesn't happen so it won't be applied, so box 1 display box will only apply when
319.62 -> my max-width is 500
321.955 -> now assume from 500, i'll make it small, i'll keep it 300
327.795 -> i will put one more media query, i'll copy this above one
332.399 -> i copied and pasted it below, copy down shortcut is created i told you this
338.972 -> i made keyboard shortcut CTRL+D, you can make anything you want, search copy line down
345.112 -> if you don't know, because many people ask this things, so here you can use your key binding
350.484 -> now here i'll block display of box 2 if my max-width becomes 500
357.991 -> and what will be min-width, i'll write here and "min-width", 500 and 300 okay
367.334 -> max 500, min 300
369.169 -> and as soon as this thing happens so see here what will happen
372.84 -> so i blocked display of box 2 okay
377.477 -> so see here what will happen, as soon as i come here, as i make it bigger, bigger, bigger, see this
383.984 -> i made it small, i'm a iPhone
386.32 -> i made it big so nothing happens, so lets see what issue is here
389.857 -> i gave our max-width 500 okay, i didn't gave px here first of all
394.561 -> min-width this, so here I am a tablet came
397.698 -> if i made it small, i am an iPhone came see
400.701 -> i made it large, i am a tablet came, lets change its color also so that we can see color changing
406.039 -> i'll make background color violet
409.209 -> and here i'll make background color, what should i
412.412 -> i'll make it cyan, you can do any color
415.415 -> so look here it is violet, making it small it is iPhone and making it big made it a tablet
420.287 -> and after that if i make it more big, i'll tell you how to do it
424.324 -> so here i'll write min-width before, but you have no need to do this but min-width first, max afterwards
431.498 -> we can see a readable format if i wrote like this, so what i will do here
437.804 -> i'll save it, i said starting form 0 to 300 apply this CSS
442.476 -> then i said from 300 to 500 apply this CSS, now i'll say from 500 to 800 apply this CSS
449.583 -> block display of box 3 and here i'll make it yellow
455.756 -> and along with that i'll put one more media query here and what i'll do is write
460.127 -> from 800 to anything, which display to block
465.432 -> block display of box 4, now if i take you to, i'll make this background green
472.105 -> so if i take you here, so see this
475.475 -> so first of all i made it smallest so it is iPhone
478.612 -> make it much bigger, see here width marking is given
482.249 -> as soon as it crossed 300, i am a tablet came
486.42 -> then i'll make it bigger, bigger, bigger, i am a computer came
490.59 -> so assume i don't like yellow over white, so where my background is yellow, i can make it black okay
497.497 -> so it will be applied here see
500.1 -> any CSS i write will be applied, iPhone, tablet or after that your computer and make it more bigger, so widescreen computer
509.109 -> and like this i can apply media queries and media queries will fire
513.013 -> see here it is written that your this media query is fired as you min-width was 800px
518.218 -> and as conditions of media query will get fulfilled
521.655 -> one by one which conditions are fulfilled, the media queries will get fired
526.393 -> and this way we have to make any website responsive
530.764 -> so i'm not saying that fill many media queries in your page and write media query for every device
537.037 -> this was just a example, we achieve responsiveness very cleverly
543.143 -> and without minimal effort we want our website to be responsive
549.349 -> how to do this, we will see later, but for now i'll only say that understand media query
554.988 -> media query is nothing, it is like a if condition, if you have done programming
559.326 -> then you'll know what is if condition, if you haven''t done it so i'll tell you, if condition means that condition which
565 -> should be true and applied
568.001 -> after that your media query will be effective or else this CSS written in the curly braces won't work
576.676 -> if your max-width is 300, so it will take min-width 0 automatically
581.414 -> it is between 0 t0 300, mix 0 and what is max is 300, then what will happen
586.219 -> then it will say it is correct, apply this CSS
588.922 -> so this will go in box 1, first display will set it blocks and then cyan will set it's background-color okay
595.429 -> as i increase the width, so min-width apart from being in 0 to 300, it came here in 300 to 500
602.169 -> so from all media queries whichever condition is true only that will be applied
607.407 -> So i hope you understand this, you have to see only according to your width
612.479 -> with that your media query will be applied
616.249 -> so here i made only 4 boxes, and i showed it to you, first of all i gave all of them a class box
622.689 -> i gave all of them by default some background colors, colors, alignments, font-sizes
629.696 -> and after giving this, what i did is targeted them individually
634.201 -> i said if we have smallest width box, so i say it's a iPhone
640.173 -> after that i increased the width, so i'll say it is a tablet, then i said it computer or i'll say it monitor
648.481 -> now you will say that a phone is also a type of computer
652.185 -> but you know i mean computer is a desktop computer so i'll name it that
657.357 -> i get comments that harry brother, a phone is a computer too, tablet is a computer, computer can be small
662.963 -> so i'll write desktop computer, which is normally used at our homes
666.766 -> used domestically desktop computer, i hope this is right, now here
673.106 -> one desktop computer i wrote, a widescreen computer also, according to it media query was fired
678.245 -> Now i'll tell you about media types which is not important topic, media types in CSS
683.75 -> what it is showing in media types? Print media, broadcast media]
687.621 -> we want media in CSS, so see one website opened w3.org
693.36 -> so see media types are written so see here media is of different types
697.931 -> there is print, there is screen and along with that here is braille and
703.003 -> there are many types but what we do is if we don't want to support those devices
707.941 -> because it is made for rest media types, so we'll write in our media query
713.113 -> only screen, sorry, we will write like this "only screen" and like this we'll write here
723.79 -> only screen and
725.859 -> so you don't think that why i write this, what only screen means
730.263 -> just think something like this to support this media types
735.568 -> we are saying here that we are only supporting screen media types
739.072 -> we are not supporting rest of the media types and that's about it, i will close this now
744.411 -> only you will not keep thinking thats why i told you, as a beginner
748.214 -> no need to focus on this, only you have to see how your media query is fired
754.621 -> So like this it is changing its color as i'm resizing my screen
760.493 -> now you can also resize your screen from here but i think it is the correct way
764.631 -> by making it responsive, right click and inspect, it first of all open this
768.835 -> then open this device toolbar here
773.606 -> after opening device toolbar by selecting responsive you can resize it any way
777.711 -> you can choose specific designs also, so specific design, i made iPhone 5 to tablet see
783.183 -> i didn't see width here, i inserted random width here, iPhone 6 is showing tablet
788.188 -> so you have to set this, if it is 414 then you have to put it then it will come
792.992 -> so iPad is showing desktop see
794.861 -> so, and iPad pro is showing widescreen
797.364 -> so what you have to do here
799.733 -> is to fix this values, i have inserted all random values
803.002 -> so this values has no relation with real values of iPhone and tablet
808.007 -> So i hope it is clear now and this video was very helpful
811.845 -> If this videos are helpful so i'll say individually like this videos as you see them
817.283 -> and do comment me how is this course going
820.153 -> and if you haven't access this playlist till now, so kindly access the playlist, click here to bookmark and click here to save
828.094 -> That's all in this video for now,
Thank you soo much guys for watching this video
and I will see you next time [ ♬ ]
833.933 -> [ ♬ ]
Source: https://www.youtube.com/watch?v=WTz4A8IdeEQ