CSS中的Em单元不会按预期更改字体大小值，为什么？

时间：2016-11-23 15:32:43

标签： css

当屏幕大小为1365px及更小时，我设置body {font-size: 85.333333331%;}，以使页眉，主页脚元素具有16px字体大小。当您打开浏览器的开发人员工具时，您会发现嵌套在header内的div.container和header确实具有16px字体大小...到目前为止一切都很好。嵌套在h1#logo内的div.container具有font-size: 0.48em声明。但是，当我检查谷歌浏览器中的计算选项卡时，我看到实际的字体大小是9px，但是16px * 0.48 = 7.68px，那么为什么我在那里获得不同的值呢？此错误会破坏我的整个标题，导致元素无法正确垂直对齐。谢谢你的帮助。

/* 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>

2 个答案:

答案 0 :(得分：1)

em值​​将与其直接容器（也称为父容器）相关联。我认为您可能希望使用与<html>的字体大小或称为文档根目录的字体大小相关的rem。

在这个片段中，em是rem。有两个按钮+/-，它们将修改文档根目录的字体大小。

段

＆＃13;
＆＃13; 
$('#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);
});
＆＃13; 
/* 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' }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用vw（视口宽度）根据窗口大小调整字体大小。

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

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

相关问题
最新问题