SO CSS and media queries

HTML

<h1>h1<h1>
        <h2>h2</h2>
        <p>Paragraph text</p>

CSS

body{
        font-size:100%;
    }

h1{
	font-size:2.4em;
}

h2{
	font-size:1.6em;
}

p{
	font-size:2.3em;
}

@media (max-width: 480px) {
    
    body{background-color:#ffc}
    h1 {font-size:  2em }
    h2 {font-size: 1em}
    p{font-size:1em}
}

@media (min-width:481px) and (max-width: 767px) {
    
    body{background-color:pink;
    font-size:90%;
    }
    
}