kyrose/definitions.md

## definitions.md

      
    Raw
  

              definitions.md
            
          
    breakpoints

Generic screen sizes:


device
width


phones
320px


tablets, XL phones
720 px


desktops, laptops
1024px


@media queries

deep dive
Allow us to style given properties if certain given conditions are met.

  
## flexBasis.css
@media (max-width: 450px) {
    #title {
    /* flex-basis sets how much space a container item should take up within a line of its container*/
    flex-basis: 100%;
    text-align: center;
    /* use to center by offsetting margin-right: auto; */
    margin-left: 0;
  }
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title> Nav Bar</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li id="title"><a href="#">Nav Bar Tutorial</a></li>
          <li><a href="#">Tab </a></li>
          <li><a href="#">Tab </a></li>
          <li><a href="#">Tab </a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

## responsiveHeader.css
header {
  background-color: #f5a281;
  width: 100%;
  height: 70px;
}

ul {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
}

#title {
  margin-right: auto;
}

/* Responsive design via @media query */
@media (max-width: 450px) {
  ul {
    /* flex-wrap allows items (li) within flex container (ul) to wrap around to new line */
    flex-wrap: wrap;
    justify-content: center;
    /* Reset background-color since it is confined to 70px header */
    background-color: #f5a281;
  }
}
	@media (max-width: 450px) {
	#title {
	/* flex-basis sets how much space a container item should take up within a line of its container*/
	flex-basis: 100%;
	text-align: center;
	/* use to center by offsetting margin-right: auto; */
	margin-left: 0;
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title> Nav Bar</title>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li id="title"><a href="#">Nav Bar Tutorial</a></li>
	<li><a href="#">Tab </a></li>
	<li><a href="#">Tab </a></li>
	<li><a href="#">Tab </a></li>
	</ul>
	</nav>
	</header>
	</body>
	</html>
	header {
	background-color: #f5a281;
	width: 100%;
	height: 70px;
	}

	ul {
	display: flex;
	list-style-type: none;
	justify-content: flex-end;
	}

	#title {
	margin-right: auto;
	}

	/* Responsive design via @media query */
	@media (max-width: 450px) {
	ul {
	/* flex-wrap allows items (li) within flex container (ul) to wrap around to new line */
	flex-wrap: wrap;
	justify-content: center;
	/* Reset background-color since it is confined to 70px header */
	background-color: #f5a281;
	}
	}