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

CSS

if 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

Unless 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)

thanks a lot Michael for your help.

i wonder if you have some example to show it me if it possible.

Okay, 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 @media queries 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:

<!-- On a side note, I like to put a slash at the end of my self-closing tags, like in XHTML. You don't have to do that. In fact, some might say that you shouldn't do that, but it's really your choice -->
<meta name="viewport" content="width=device-width"/>

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 the initial-scale to 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 @media queries 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.css does 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.css takes 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 named css in the same folder as your HTML page, and in that css folder is a file called normalize.css. You can download the latest version each time from here, and place it in the previously described location

wow that pretty good. i do not know i can thank you Michael much appreciate