css - 如果我更改根字体大小，则填充/边距不能正确缩放。怎么来的？

如果我在下面的代码笔中更改根字体大小，则填充/边距不能正确缩放。怎么来的？

例如，尝试将根字体大小设置为200％，以便可以清楚地看到它。

http://codepen.io/timaarts/pen/oajcz

希望你能帮助:)

   /*--> RESET & STUFF <--*/

*,:after,:before {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  vertical-align:top
}

header,footer {
  display:block
}

html {
  font:100%/1.5 "Helvetica Neue", Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust: 100%;
  background-color: #f5f5f5;
}

body {
  max-width:51em;
  margin:0 auto;
  padding:0 1.5rem;
  color:#333;
  background-color: white;
}

/*--> BASIC TYPOGRAPHY <--*/

h1 {
  font-size:1.25em;
  line-height:1.2em;
  font-weight:400;
  margin-bottom:1.5rem
}

p {
  font-size:1em;
  margin-bottom:1.5rem
}

a {
  color:#39f;
  text-decoration:none;
  border-bottom:1px solid #eee
}

::selection {
  background:#fff3c8
}

/*--> HEADER <--*/

header {
  height:4.5rem;
  line-height:4.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid #eee;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

.logo {
  color:#333;
  border-bottom:0
}

.nav {
  float:right
}

.nav ul {
  list-style:none
}

.nav li {
  display:inline-block;
  padding-left:1.5rem
}

/*--> PROJECT PAGE <--*/

.content-wrap {
  margin-bottom:1.5rem
}

.content {
  width:83.333333%;
  margin:0 auto
}

.content img {
  max-width:100%;
  height:auto;
  margin-bottom:1.5rem;
  display:block
}

.video {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden
}

.video iframe,.video object,.video embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}

.devider {
  height:1px;
  margin-bottom:1.5rem;
  background-color:#eee
}

/*--> PROJECT INDEX <--*/

ul.grid {
  list-style:none;
  margin-left:-1.5rem
}

ul.grid li {
  width:33.333333%;
  display:inline-block;
  padding-left:1.5rem;
  margin-bottom:1.5rem
}

ul.grid a {
  color:#333
}

ul.grid li img {
  max-width:100%;
  height:auto
}

ul.grid li p {
  font-size:.75em;
  font-family:"Andale Mono",AndaleMono,monospace;
  height:1.5rem;
  line-height:1.5rem;
  text-align:center;
  background-color:#eee;
  margin-bottom:0;
  overflow:hidden
}

/*--> FOOTER <--*/

footer {
  height:4.5rem;
  font-size:.875em;
  line-height:4.5rem;
  text-align:center;
  border-top:1px solid #eee
}

footer p {
  margin:0
}

.heart {
  color:red
}

@keyframes blink {
0% { color:red }
100% { color:#fff }
}

@-webkit-keyframes blink {
0% { color:red }
100% { color:#fff }
}

.blink {
  -webkit-animation:blink 1s linear infinite;
  -moz-animation:blink 1s linear infinite;
  -ms-animation:blink 1s linear infinite;
  -o-animation:blink 1s linear infinite;
  animation:blink 1s linear infinite
}

/*--> RESPONSIVE <--*/

@media screen and (max-width: 40em) {

.content { width:100% }

ul.grid li { width:50% }

}

最佳答案

Chrome或Codepen似乎都存在有关rem单位的渲染错误。 Safari可以正常工作。