rem support for IE
This commit is contained in:
parent
df5315b05e
commit
504dc59501
3 changed files with 24 additions and 18 deletions
|
@ -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
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in a new issue