Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
wajdi aljedaani
Courses Plus Student 823 Pointsif i want to create a responsive website, do i have paste this line in anytime i create web Or there is some change.
if i want to create a responsive website, do i have paste this line in anytime i create website Or there is some change on it.
what i mean is that on the line below which we write anytime we apply css.
<link rel="stylesheet" href="css/normalize.css">
we only need to change the name of the file.
my question is:
in the responsive web design. do we have to change anything on this line or anytime i apply this responsive i just paste this like.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
thanks million in advance.
2 Answers
Michael Hulet
47,913 PointsUnless you want it to be zoomed in by a different factor on first load, or unless you want it to scroll horizontally, that should always be good, as long as its standard remains the same (and I don't see that changing anytime soon)
wajdi aljedaani
Courses Plus Student 823 Pointswow that pretty good. i do not know i can thank you Michael much appreciate
wajdi aljedaani
Courses Plus Student 823 Pointswajdi aljedaani
Courses Plus Student 823 Pointsthanks a lot Michael for your help.
i wonder if you have some example to show it me if it possible.
Michael Hulet
47,913 PointsMichael Hulet
47,913 PointsOkay, so some form of that tag has to be there, if you're designing a responsive website. If it's not, the relative values and
@mediaqueries won't be the same across all browsers, and it'll just be weird and make your life a whole lot harder. The bare minimum that you need is this:What this'll do is set the CSS width of the page to the actual device's viewport width. This may seem redundant, but browsers don't always actually do this by default, so you have to include it here to make sure your page looks the same in all web browsers. It also tells the browser another thing: that your page scrolls vertically, and not horizontally. If you want your page to scroll horizontally, you'll instead want this:
<meta name="viewport" content="height=device-height"/>This does the same thing as the previous example, but instead of setting the width to be the fixed value, it instead says that the height should always stay the same when fully zoomed out, and the page should scroll left to right (or vice-versa, if you're into that).
Speaking of zooming, that's what the second part of your initial tag covers. In this case, you're setting the page to be fully zoomed out when the page loads. This again may seem like a no-brainer, but not all browsers do this by default, so it's usually a good idea to include it. The way you set it to be fully zoomed out is exactly the way you originally wrote:
<meta name="viewport" content="initial-scale=1.0"/>You can change that number to be whatever you want, as long as it's greater than
1.0. Why would you ever want to do this, you might ask? Well, let's say you wanna do some cool zoom out animation with JavaScript when the page loads. In that case, you might set theinitial-scaleto something higher, like this:<meta name="viewport" content="initial-scale=10.0"/>What that'll do is set the page to be zoomed in by a factor of 10 when the page first loads, so you can do something cool with scrolling or make some awesome animation or something like that.
Of course, you can combine these concepts to get the tag you originally wrote:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>That'll make sure your relative units and
@mediaqueries look the same across all browsers, and it also makes sure your page is fully zoomed out when it loads. Of course, you can edit these values individually. let's say that you want a horizontally scrolling responsive page that starts out being zoomed in 5x. Then your tag would look like this:<meta name="viewport" content="height=device-height, initial-scale=5.0"/>To address the very beginning of your question (because I wasn't entirely sure if it was a part of the question), what
normalize.cssdoes is it resets any of the default browser styles in all of the major browsers, so when you code your page's CSS in one browser, you say with a high degree of certainty that it'll look the same in all the other major browsers. This is needed because different browsers apply different default styles to all the pages they load, and due to the cascading nature of CSS, this can sometimes mess with your CSS in unexpected ways, that only happens in certain browsers.normalize.csstakes care of resetting all of those default styles for you in all of the internet's major browsers, so you don't have to debug weird problems that would be caused by default browser styling yourself. The tag that you have will always work, as long as there's a folder namedcssin the same folder as your HTML page, and in thatcssfolder is a file callednormalize.css. You can download the latest version each time from here, and place it in the previously described location