In this demo we’ll try to change the background color of the body when the user increases or decreases the browser window size.
But let’s just go for some basics which will help you understand the whole concept.
The CSS @media rule is used to apply many different styles for various devices. It is very helpful especially for responsive website development. Just one or two media rules and the website will be displayed in many devices with their appropriate sizes. So whether your users are using laptops, cell phones or tablets or desktops, your website will work and give users best experience for navigation.
Let’s take a look at our first Demo code.
In DEMO 1, I’ve set the background-color property to green. Which will be the default background color. The font color I’ll keep as white but if you want to change that property, you can write down any color name for any size.
Then the CSS media rules I’ve set are max-width to 800px for smaller screens and again max-width to 500px for even smaller screens. That’s all we’re doing in this example. It’ll give you a basic idea of how media rule works in CSS.
You have to use the word @media and then screen for different screens such as computers, laptops, tablets, cell phones etc. And in the end what you’ll do is to set the rule for specific screen size for e.g. screen size of 500px or lower you can write down max-width:500px.
Go ahead type the code in your editor and check the results. Try to adjust the browser window.
In this example I’ll show you how to adjust the menu bar when displaying in small and big screens. Checkout the code below and then I’ll discuss it after the code.
In the code above, I’ve simply created HTML menu bar with 3 links using div element and CSS style as well. With CSS I’ve displayed it as a block floating left. Also when you hover over it, the item will be displayed in different color. So that was basic menu creation.
Then, as I’ve demonstrated in last example, I’ve used max-width:800px with CSS media rule and removed the float property value. And that’s it. So when you decrease the browser window size and reach at 800px, the menu will adjust itself accordingly.
In this example I’ll show you how to adjust columns on different screen sizes. Checkout the code below and then I’ll discuss it after the code.
In the code above, I’ve added 4 same height and width columns with div and divColumn class. With using :after CSS selector I’m adding an empty table and attaching the columns one after another. That is our default settings.
In @media rule I’ve added screen again same as previous examples for different devices. Also, I’ve used max-width property and on 650px and 800px,the browser will adjust the columns width to 100% and 50% size accordingly.
In this example I’ll show you how to hide any element when displaying in small screens. Checkout the code below and then I’ll discuss it after the code.
In the code above, I’ve created a div element with the class name ‘hide’. In CSS style, I’ve added default div properties and in @media rule, I’m just hiding it when the screen size is 800px or less using max-width property.
In this example I’ll show you how to change the size of fonts in any element for different screen sizes. Let’s look at the code first.
I’ve added simple div element in HTML body and then using CSS I’ve set the size and color. Notice that I haven’t specified any font-size in default CSS. For that I’m using media rule. For screen size 800px and above the font-size will be 80px and for 800px and below it’ll be 30px. The element div will adjust itself as well as per the font-size.
examples media-queries responsive