rem support for IE

This commit is contained in:
Raphael Goetter 2014-05-03 14:20:00 +02:00
parent df5315b05e
commit 504dc59501
3 changed files with 24 additions and 18 deletions

View file

@ -13,12 +13,12 @@
// font sizes // font sizes
@basefont : 14px; // if "14px" then 1em = 14px @basefont : 14px; // if "14px" then 1em = 14px
@line-height : 1.5; // equiv line-height 1.5 @line-height : 1.5; // equiv line-height 1.5
@h1-size : 32px; // equiv "32px" @h1-size : 3.2rem; // equiv "32px"
@h2-size : 28px; // equiv "28px" @h2-size : 2.8rem; // equiv "28px"
@h3-size : 24px; // equiv "24px" @h3-size : 2.4rem; // equiv "24px"
@h4-size : 20px; // equiv "20px" @h4-size : 2.0rem; // equiv "20px"
@h5-size : 18px; // equiv "18px" @h5-size : 1.8rem; // equiv "18px"
@h6-size : 16px; // equiv "16px" @h6-size : 1.6rem; // equiv "16px"
// font stacks // font stacks
@fontstack1 : Helvetica, Arial, sans-serif; // common font @fontstack1 : Helvetica, Arial, sans-serif; // common font

View file

@ -80,22 +80,22 @@ hgroup {
line-height: @line-height; line-height: @line-height;
} }
h1, .h1-like { h1, .h1-like {
.rem(@h1-size / 10); font-size: @h1-size;
} }
h2, .h2-like { h2, .h2-like {
.rem(@h2-size / 10); font-size: @h2-size;
} }
h3, .h3-like { h3, .h3-like {
.rem(@h3-size / 10); font-size: @h3-size;
} }
h4, .h4-like { h4, .h4-like {
.rem(@h4-size / 10); font-size: @h4-size;
} }
h5, .h5-like { h5, .h5-like {
.rem(@h5-size / 10); font-size: @h5-size;
} }
h6, .h6-like { h6, .h6-like {
.rem(@h6-size / 10); font-size: @h6-size;
} }
/* alternate font-sizing */ /* alternate font-sizing */

View file

@ -6,22 +6,28 @@
& when (@ie678 = true) { & when (@ie678 = true) {
/* IE678 support */ /* IE678 support */
.ie678 h1, .ie678 .h1-like { .ie678 h1, .ie678 .h1-like {
.em(@h1-size); @em: @h1-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
} }
.ie678 h2, .ie678 .h2-like { .ie678 h2, .ie678 .h2-like {
.em(@h2-size); @em: @h2-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
} }
.ie678 h3, .ie678 .h3-like { .ie678 h3, .ie678 .h3-like {
.em(@h3-size); @em: @h3-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
} }
.ie678 h4, .ie678 .h4-like { .ie678 h4, .ie678 .h4-like {
.em(@h4-size); @em: @h4-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
} }
.ie678 h5, .ie678 .h5-like { .ie678 h5, .ie678 .h5-like {
.em(@h5-size); @em: @h5-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
} }
.ie678 h6, .ie678 .h6-like { .ie678 h6, .ie678 .h6-like {
.em(@h6-size); @em: @h6-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
} }
.ie678 img { .ie678 img {
width: auto; /* @bugfix for IE8 */ width: auto; /* @bugfix for IE8 */