Today has not been a good day. I still went through with my studying but did not complete everything that I wanted to.
Anyways, I went over Responsive Design.
As screen sizes vary and consumption of the web is through mobile phones increasingly, developers have to ensure that users are able to use their site seamlessly. This is where Responsive Design comes in. It allows us to meet the needs of the many screen sizes.
Media Queries
Media Queries are CSS rules designed specifically for a variety of screen sizes. They are conditional rules and only apply if the screen size meet the parameters set by the rule. There are 2 main ways to include them in your side.
1) Link them via a separate stylesheet
One of the benefits of this method is that the link will be ignored if the device width does not meet the parameters of the media query.
If it does meet the parameters, you would have to think about load time.
<link rel="stylesheet" type="text/css" media="screen and
(max-device-width: 480px)" href="mobile.css"/>
2) Include then in the main stylesheet
This is my preferred method as all the rules are in one file.
@media only screen and (min-width: 480px) {
body:after {
content: "480px to 768px";
background-color: hsla(180,60%,40%,0.7);
}
}
In most of the projects I have worked on and made responsive, I was making a clone and knew what changes to make for different screen sizes.
When I was working on the YouTube clone project, I used the Grid to create the main layout. Then I set it up so that when the screen reaches a certain width, the Grid will be displayed another way.
A few things I had to think about when I was making it responsive.
1) Fixed Units
There were section in my grid where I used pixels and when I made it responsive, that section stayed the same width. You may want to stick with % or fractional units with the Grid.
2) Images
Images were the worst to deal with. At first, I gave the image an inline width and as you can imagine, no matter the width the screen, the images were still 180px. The way I fixed it was by putting the image in a div
and setting the width to 100%.
That's it for today.
The streak continues ...
Top comments (8)
Best of luck in your learning endeavors.
Can i make a suggestion on how to embed your code snippets?
Thank you.
Please do, I resorted to a screenshot because when I used the
, it comes out weird when I tried it.
I saw your guide on Dev editor and I made the changes to embed the code snippets. Thank you.
You are welcome. I am glad the post helped.
I think you should indicate the language in your second code snippet as CSS and the appropriate syntax highlighting will be applied. Right now it's been rendered as plaintext.
When you do the code would be rendered as thus:
And you can check the Developer Tools to confirm that instead of "plaintext", "css" is now used.
EDIT: You can achieve this by adding the word CSS after the first set of backticks.
Thank you so much, I added the language to the second one.
I am also going through your "FrontEnd Development: Zero to Hero". I like to read about the same topic from different people and It helps so much to either learn new things or understand better.
You are welcome.
Same here.
Good post, It'll help me in my personal projects.
Thank you, I'm glad it's helpful!