1 00:00:05,530 --> 00:00:14,500 As a conclusion of the advance properties of the siestas, let's talk now about the foundation for the 2 00:00:14,500 --> 00:00:18,400 responsive design that are the media queries. 3 00:00:20,330 --> 00:00:31,340 The media queries inside our time sheets have the aim of enabling us to insert determined properties 4 00:00:31,340 --> 00:00:41,060 into selectors, making them display according to the browser window resolution and can be inserted 5 00:00:41,060 --> 00:00:42,140 thanks to the. 6 00:00:43,270 --> 00:00:45,430 ET media rule. 7 00:00:47,240 --> 00:00:54,410 Within this rule, the first thing to specify is the type of media we want to consider. 8 00:00:55,630 --> 00:00:58,600 In our case, let's insert screen. 9 00:00:59,820 --> 00:01:09,720 It is the fundamental base to represent PC, desktop, tablet and cell phones so that to make every 10 00:01:09,720 --> 00:01:10,840 medium different. 11 00:01:11,130 --> 00:01:19,980 So according to the different devices, what we should do at this point is inserting and and the rule 12 00:01:19,980 --> 00:01:23,810 which will contain max or min width. 13 00:01:24,880 --> 00:01:29,100 That is the greatest or the least with. 14 00:01:31,370 --> 00:01:44,360 By starting, for example, from mux width and setting one thousand twenty four pixel as reference value, 15 00:01:44,570 --> 00:01:50,000 we can then open our selector and insert into this rule. 16 00:01:51,210 --> 00:01:58,530 All those functions which are supposed to appear in the case, the screen is one thousand twenty four 17 00:01:58,530 --> 00:02:00,960 pixel maximum, which is. 18 00:02:02,150 --> 00:02:08,090 The iPad pro resolution to make things easier, let's delete. 19 00:02:09,190 --> 00:02:14,470 What we have inserted so far, leaving exclusively body. 20 00:02:16,190 --> 00:02:18,930 Inside a dark age time out. 21 00:02:18,950 --> 00:02:21,410 Let's leave only our H. 22 00:02:21,410 --> 00:02:26,610 One title, which doesn't have any type of selectors as linked. 23 00:02:26,630 --> 00:02:32,320 The first thing we are going to see is the way the Media Queries Act. 24 00:02:32,330 --> 00:02:41,120 Therefore, inside media screen Max, with one thousand twenty four pizza, we are inserting a new buddy. 25 00:02:42,320 --> 00:02:51,290 In so doing, this selecter, when a screen meets a one thousand twenty four pixel maximum with. 26 00:02:53,470 --> 00:02:59,030 We'll have different features from what seen inside the generic selecter. 27 00:03:00,380 --> 00:03:08,630 So what will happen in case any other greater than one hundred twenty four pixel width is present? 28 00:03:10,950 --> 00:03:21,630 Therefore, that Copi the body content and let's modify it, let's insert area as one family, let's 29 00:03:21,630 --> 00:03:28,890 change the background color into black and as color, let's insert. 30 00:03:30,270 --> 00:03:30,870 White. 31 00:03:32,710 --> 00:03:42,790 Now we can save refresh and we'll see that our screen has undergone a change, according to the media 32 00:03:42,790 --> 00:03:47,890 query inserted if we wanted to widen our. 33 00:03:49,430 --> 00:03:50,330 Prevue. 34 00:03:51,790 --> 00:04:00,450 Once over the one thousand twenty four pixels, as you see, the setting of Buddy has gone back to normal, 35 00:04:00,820 --> 00:04:02,530 getting back as you see. 36 00:04:04,170 --> 00:04:11,460 Automatically, thanks to media query the Cyesis, modify the setting of Buddy. 37 00:04:12,650 --> 00:04:22,100 It would work the same way if from Max, we should insert men, so let's save and refresh and by widening 38 00:04:22,130 --> 00:04:27,140 automatically, the screen alters its features. 39 00:04:28,260 --> 00:04:37,110 So these media queries will be essential when it comes to realize a responsive website. 40 00:04:38,550 --> 00:04:42,030 Therefore, when we deal with all these features. 41 00:04:43,020 --> 00:04:52,170 Which are supposed to modify themselves in the development of a website moving from one device to another. 42 00:04:52,380 --> 00:05:00,420 Now that we have ended these theoretical but also practical part, let's call it this way, because 43 00:05:00,450 --> 00:05:09,750 this was let's start with drilling down the innovative topics that will take us to be able to create 44 00:05:09,840 --> 00:05:20,040 together a project making us create our own personal page with some content able to adapt perfectly 45 00:05:20,040 --> 00:05:25,740 to any device with only the help of HDMI and Cyesis.