-1

I’m learning about Flexbox in CSS and I wonder what the first line exactly does, i.e. what is @media screen and what exactly is one em?

@media screen and (min-width: 30em) {
  .single-nav ul {
    display: flex;
    justify-content: space-between;
  }

  .single-nav li {
    flex: 1 0 auto;
    text-align: center;
  }
}
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Josias58
  • 13
  • 1
  • 3
  • They are [media queries](https://stackoverflow.com/tags/media-queries/info). They are unrelated to flexbox. As for the `em` unit, there are tons of results if you just Google `CSS em`, e.g. [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Lengths). – Sebastian Simon Jun 01 '20 at 15:38
  • Thanks to both of you! Yes, this answers my question, I'll look into it later :) – Josias58 Jun 01 '20 at 18:54
  • “Both”? It’s just me, as far as I can see… Or are you referring to someone else who suggested the same link to the other question (only reflected by an upvote and a second “close” vote)? – Sebastian Simon Jun 01 '20 at 19:16

1 Answers1

1

The @media is used for responsive html css design. using the @media screen and (min-width: 30em) it indicates that if the screen size is 30em or larger then that specific css properties will be applied.See the small example for better understanding.

The em is used for dynamic font size.If you use px for font size then font will not resize when you change your system font-size. Other hand em or rem is dynamically changed in size when you change your system font size.

.example{
background-color:red;
padding:100px;
}
@media only screen and (max-width: 700px){
.example{
background-color:yellow;
}
}
<html>
<head>
<style>

</style>
</head>

<body>
<div class="example">
<p>when screen size is 700px or lesser then background will be yellow otherwise red</p>

</div>
</body>
</html>
arnab das
  • 135
  • 7