Responsive CSS Code For All Screen Size
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Pragati
In this tutorial we will show you the solution of responsive CSS code for all screen size, as we know using media query we can make any website with responsive design.
Responsive means our website looks layout can’t break at any size of device because after hosting one website in online it can available to worldwide people so we need to confirm our website layouts and responsiveness.
Website is most important in marketing because it is first thing to attract everyone’s attention know about our company or product like anything.
Step By Step Guide On Responsive CSS Code For All Screen Size :-
Here we used internal style method to write media queries and in our program we defined one <div> tag with attribute class ‘example’ using this we are applied media queries for all screen sizes.
Usually media query used to find at which point our layout is breaking then only we can modify layouts at that points (i.e screen size).
Here we have written break points for all screen sizes so our layout can’t get affected on any screen size.
<!DOCTYPE html>
<html>
<head>
<title>MEDIA QUERY</title>
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
</style>
</head>
<body>
<div class="example"><center>This is responsive page for all screen size</center></div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Within <style> tag we defined each device size with modified layout and when we defining style used id or class of particular element we have to use respective symbols ‘.(dot)-refers class attribute’ and ‘#(hash)-refers id attribute’ before name of id or class attribute.
- Initially we sets padding to ‘20px’, color to ‘white’ after that we sets our layout design at screen size ‘maximum 600px view’ it covers small devices screen and always media queries syntax start with ‘@media screen and’ after that we need to define our screen size it may ‘min size’ or ‘max’.
- Next we start our media query for large size device so our screen size set as ‘minimum 600px view’ it is covers from 600px to any scale screen sizes.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined one <div> tag with class attribute ‘example’ for style layout at each screen sizes.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know about responsive css code.
Here we set’s layout design for all screen sizes and generally each device had separate size based on that we need to decide out layout looks but with our concept we can open on any screen.
When we load our program on browser we can see one rectangular box covers whole width of screen with some text aligned to center of page.
If we need to check all sizes layout then you needs to right click on the empty space on website and select option ‘insect’.
Next right hand side panel will open there you have to click on symbol like ‘mobile and tablet’ so there you can check website alignments.
I hope this article on responsive CSS code for all screen size helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
