Trying to implement simple media query for practice on notepad, but it doesn't seem to be picking up and I don't know why.
<!DOCTYPE HTML>
<style>
.heading {
margin-left: 220px;
}
@media screen and (max-width: 479px) {
.heading {
margin-left: 30px;
}
}
</style>
<h1 class="heading">Hello World</h1>
</html>
When I run this in the chrome browser in iPhone view, it ignores the media query and applies the first margin-left instead.
Set your viewport with:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.heading { margin-left: 220px; } @media screen and (max-width: 479px) {.heading { margin-left: 30px; } }
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <h1 class="heading">Hello World</h1>
Read more about it here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.