Media Query | Notion

CSS Media Query is essential for responsive mobile design.

Let’s prepare some basic code to start.

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				color: red;
			}
		
		
			.title {
				font-size: 6rem;
			}
		
			.subtitle {
				font-size: 4rem;
			}
		</style>
	</head>

	<body>
		<p class="title">Title</p>
		<p class="subtitle">Subtitle</p>
	</body>
</html>

To deal with responsiveness, you need to add @media + the type of device you’re dealing with to your CSS code.

The type of media could either be a screen, a print device (it impacts how you see things when you try to print the page), or a speech device (text-to-speech, a screen reader for example).

If you want to select all different types of devices there’s @media all .

But then... you will have to add your specific media query selector, for example if you want to specify that under a certain width your page will look different.

so, you will have to add and @media all + and (max-width: 500px) and then open the CSS brackets and start writing CSS inside it { }.

@media all and (max-width: 500px) {

			body {
				color: blue;
			}
			
		}

Untitled

Whenever all the media query values are true @media all and (max-width: 500px), then the code inside actually runs, if they are false, it just ignores anything inside the media queries.