CODEWITHSUNDEEP
css
Peter
Peter

Reputation: 419

Em unit in CSS doesn't change font-size value as expected, why?

When the screen size is 1365px and less I set body {font-size: 85.333333331%;} so that the header, main, footer elements have 16px font-size. When you open a browser's developer tools you see that the header and div.container nested inside the header really have 16px font-size ... so far so good. h1#logo nested inside the div.container has a font-size: 0.48em declaration. However, when I check the computed tab in google chrome I see that the actual font-size is 9px, but 16px * 0.48 = 7.68px, so why am I getting a different value there? This error breaks my entire header which leads to the elements not being properly vertically aligned. Thanks for your help.

/* general */
body {
	margin: 0;
	font: 100% "Open Sans", sans-serif;
	color: #7f7e7d;
}

header, main, footer {
	font-size: 1.171875em; /* 18.75px / 16px */	
}

h1, h2, h3, h4, p, blockquote, figure, ol, ul {
    margin: 0;
    padding: 0;
}

main {
	display: block;
}

h2 {
	font-size: 3.3333333333em; /* 62.5px / 18.75px */
	font-weight: 400;
}

h3 {
	font-size: 1.5557333333em; /* 29.17px / 18.75px */
	margin: 1.1733333333em 0; /* 22px / 18.75px */
	font-weight: 400;
}

p {
	font-weight: 300;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.container {
	max-width: 960px;
	margin: 0 auto;
}

.menu {
	list-style: none;
}

.menu > li {
	float: left;
}

.hide {
	display: none;
}

.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}

/* header */
header {
	background: #000;
	color: #ccc;
	font-weight: 300;
}

header .container {
	position: relative; /* kvoli jazykovemu menu, ktore bude absolute */
	z-index: 1;
}

/* logo */
#logo {
	float: left;
	font-size: 0.48em; /* 9px / 18.75px */
	font-weight: inherit;
}

#logo a {
	display: block;
	text-transform: uppercase;
}

.logoPic {
	display: inline-block;
	text-indent: -9999px;
	background: url(../img/logo/logo.png) no-repeat left center;
	width: 148px; /* logo width */
	line-height: 7.6666666666666666666666666666667em; /* 69px / 9px */
	padding-right: 18px; /* priestor pre lomitko */
	position: relative;
}

.logoPic::after {
	content: "/";
	position: absolute;
	text-indent: 0;
	right: 3px;
	font-size: 40px; /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */
	color: #ffcc00;
}

/* navigation */
nav {
	float: right;
}

nav a {
	display: block;
}

#nav > li > a {
	line-height: 3.68em; /* 69px / 18.75px */
}

#nav > li {
	position: relative;
	margin-right: 1.2266666666666666666666666666667em; /* 23px / 18.75px */
}

#nav > li:last-child {
	margin-right: 0;
}

#nav > li:hover:not(.sub) > a {
	color: #bf9900;
}

#nav > li.sub:hover > a::before {
	content: "";
	position: absolute;
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	height: 0.26666666666666666666666666666667em; /* 5px / 18.75px */
	background: #ffcc00;
}

#nav > li.sub:hover .submenu {
	visibility: visible;
}

/* navigation submenu */
.submenu {
	position: absolute;
	top: 3.7866666666666666666666666666667em; /* 71px / 18.75px */
	left: -1.0666666666666666666666666666667em; /* 20px / 18.75px */
	background: #000;
	list-style-type: none;
	visibility: hidden;
	transition: visibility .15s;
}

.submenu a {
	padding: 0.55626666666666666666666666666667em 0.67866666666666666666666666666667em; /* 10.43px / 18.75px | 12.725px / 18.75px */
}

.submenu li:hover {
	color: #bf9900;
}

/* languages */
#languages {
	position: absolute;
	right: -9.2266666667em; /* 173px / 18.75px */
}

#languages a {
	display: inline-block;
	line-height: 3.68em; /* 69px / 18.75px */
}

#languages li::after {
	content: "/";
	padding: 0 0.16em; /* 3px / 18.75px */
}

#languages li:last-child::after {
	content: "";
	padding-right: 0;
}

#languages li:hover a {
	color: #bf9900;
}

/* media queries */
@media (max-width: 1365px) {
	body {
		font-size: 85.333333331%;
	}
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
	<header>
		<div class="container cf">
			<h1 id="logo">
				<a href="#">
					<span class="logoPic">Marek Petrik</span>Professional Photographer
				</a>
			</h1>

			<nav>
				<ul id="nav" class="menu cf">
					<li><a href="#aboutMe">O mne</a></li>
					<li><a href="#">Služby</a></li>
					<li class="sub"><a href="#">Portfólio</a>
						<ul class="submenu ">
							<li><a href="#">Svadba</a></li>
							<li><a href="#">Modeling</a></li>
							<li><a href="#">Príležitostné</a></li>
							<li><a href="#">Architektúra</a></li>
							<li><a href="#">Príroda</a></li>
							<li><a href="#">Deti</a></li>
						</ul>
					</li>
					<li><a href="#">Referencie</a></li>
					<li><a href="#">Cenník</a></li>
					<li><a href="#">Kontakt</a></li>
				</ul>
			</nav>

			<ul id="languages" class="menu">
				<li><a href="#">SK</a></li>
				<li><a href="#">EN</a></li>
				<li><a href="#">DE</a></li>
			</ul>
		</div>
	</header>
</body>
</html>

Upvotes: 1

Views: 3530

Answers (2)

zer00ne
zer00ne

Reputation: 44086

em value will be related to it's immediate container otherwise known as the parent. I think you'll probably want to use rem which is always related to the font-size of the <html> or what's called the document root.

In this Snippet, the em are rem. There's two buttons +/- which will modify the font-size of document root.

SNIPPET

$('#in1, #in2').on('click', function(e) {
  var cur = $('#hook').css('font-size');
  var res;
  var mod = $(this).data('v');
  
  res = parseFloat(cur) + parseFloat(mod);
  $('#out1').val(res);

  $('#hook').css('font-size', res);
});
/* general */

html {
  font-size: 16px;
}
body {
  margin: 0;
  font: 100%"Open Sans", sans-serif;
  color: #7f7e7d;
}
header,
main,
footer {
  font-size: 1.171875rem;
  /* 18.75px / 16px */
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
  margin: 0;
  padding: 0;
}
main {
  display: block;
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3.3333333333rem;
  /* 62.5px / 18.75px */
  font-weight: 400;
}
h3 {
  font-size: 1.5557333333rem;
  /* 29.17px / 18.75px */
  margin: 1.1733333333rem 0;
  /* 22px / 18.75px */
  font-weight: 400;
}
p {
  font-weight: 300;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.menu {
  list-style: none;
}
.menu > li {
  float: left;
}
.hide {
  display: none;
}
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
/* header */

header {
  background: #000;
  color: #ccc;
  font-weight: 300;
}
header .container {
  position: relative;
  /* kvoli jazykovemu menu, ktore bude absolute */
  z-index: 1;
}
/* logo */

#logo {
  float: left;
  font-size: 0.48rem;
  /* 9px / 18.75px */
  font-weight: inherit;
}
#logo a {
  display: block;
  text-transform: uppercase;
}
.logoPic {
  display: inline-block;
  text-indent: -9999px;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) left center no-repeat contain;
  width: 148px;
  /* logo width */
  line-height: 7.6666666666666666666666666666667rem;
  /* 69px / 9px */
  padding-right: 18px;
  /* priestor pre lomitko */
  position: relative;
}
.logoPic::after {
  content: "/";
  position: absolute;
  text-indent: 0;
  right: 3px;
  font-size: 40px;
  /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */
  color: #ffcc00;
}
/* navigation */

nav {
  float: right;
}
nav a {
  display: block;
}
#nav > li > a {
  line-height: 3.68rem;
  /* 69px / 18.75px */
}
#nav > li {
  position: relative;
  margin-right: 1.2266666666666666666666666666667rem;
  /* 23px / 18.75px */
}
#nav > li:last-child {
  margin-right: 0;
}
#nav > li:hover:not(.sub) > a {
  color: #bf9900;
}
#nav > li.sub:hover > a::before {
  content: "";
  position: absolute;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  height: 0.26666666666666666666666666666667rem;
  /* 5px / 18.75px */
  background: #ffcc00;
}
#nav > li.sub:hover .submenu {
  visibility: visible;
}
/* navigation submenu */

.submenu {
  position: absolute;
  top: 3.7866666666666666666666666666667rem;
  /* 71px / 18.75px */
  left: -1.0666666666666666666666666666667rem;
  /* 20px / 18.75px */
  background: #000;
  list-style-type: none;
  visibility: hidden;
  transition: visibility .15s;
}
.submenu a {
  padding: 0.55626666666666666666666666666667rem 0.67866666666666666666666666666667rem;
  /* 10.43px / 18.75px | 12.725px / 18.75px */
}
.submenu li:hover {
  color: #bf9900;
}
/* languages */

#languages {
  position: absolute;
  right: -9.2266666667rem;
  /* 173px / 18.75px */
}
#languages a {
  display: inline-block;
  line-height: 3.68rem;
  /* 69px / 18.75px */
}
#languages li::after {
  content: "/";
  padding: 0 0.16rem;
  /* 3px / 18.75px */
}
#languages li:last-child::after {
  content: "";
  padding-right: 0;
}
#languages li:hover a {
  color: #bf9900;
}
/* media queries */

@media (max-width: 1365px) {
  body {
    font-size: 85.333333331%;
  }
}
#fixed {
  position: fixed;
  top: 10px;
  max-width: 35ex;
  margin-bottom: 20px;
  z-index: 80;
}
#in1,
#in2,
#out1 {
  position: fixed;
  top: 10px;
  max-width: 3.5ex;
}
#in2 {
  left: 10.5ex;
}
#out1 {
  left: 3ex;
  z-index:11111;
  font-size:18px;
  color: black;
  text-align: center;
}
#out1::after { content:'px' }
<!DOCTYPE html>
<html id='hook'>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <header id='fixed'>
    <button id='in1' data-v='1'>+</button>
    <output id='out1'></output>
    <button id='in2' data-v='-1'>-</button>
  </header>
  <br/>
  <br/>
  <br/>
  <header>
    <div class="container cf">
      <h1 id="logo">
				<a href="#">
					<span class="logoPic">Marek Petrik</span>Professional Photographer
				</a>
			</h1>

      <nav>
        <ul id="nav" class="menu cf">
          <li><a href="#aboutMe">O mne</a>
          </li>
          <li><a href="#">Služby</a>
          </li>
          <li class="sub"><a href="#">Portfólio</a>
            <ul class="submenu ">
              <li><a href="#">Svadba</a>
              </li>
              <li><a href="#">Modeling</a>
              </li>
              <li><a href="#">Príležitostné</a>
              </li>
              <li><a href="#">Architektúra</a>
              </li>
              <li><a href="#">Príroda</a>
              </li>
              <li><a href="#">Deti</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Referencie</a>
          </li>
          <li><a href="#">Cenník</a>
          </li>
          <li><a href="#">Kontakt</a>
          </li>
        </ul>
      </nav>

      <ul id="languages" class="menu">
        <li><a href="#">SK</a>
        </li>
        <li><a href="#">EN</a>
        </li>
        <li><a href="#">DE</a>
        </li>
      </ul>
    </div>
  </header>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

Upvotes: 2

Dolphine
Dolphine

Reputation: 119

Use vw(viewport width) it resizes the font according to window size.

  h1 {
      font-size: 5.9vw;
    }
    h2 {
      font-size: 3.0vh;
    }
    p {
      font-size: 2vmin;
    }

https://jsfiddle.net/dolphine/uj50trfn/

Upvotes: 0

Related Questions