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

View file

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

View file

@ -6,22 +6,28 @@
& when (@ie678 = true) {
/* IE678 support */
.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 {
.em(@h2-size);
@em: @h2-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
}
.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 {
.em(@h4-size);
@em: @h4-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
}
.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 {
.em(@h6-size);
@em: @h6-size * 10 / @basefont;
font-size: unit(round(@em,2), em);
}
.ie678 img {
width: auto; /* @bugfix for IE8 */