<div>
<h1>VW Responsive Text Mixin!</h1>
<h2>Scaling text manually with media query breakpoints is tiresome and boring.</h2>
<p>With this mixin you can easily create text that will smoothly scale down from an upper bounds breakpoint down to a specific minimum font size, all with only CSS(LESS).</p>
<code>
h1 { .ResponsiveText(960,3.4,2); }
</code>
<p>Generates to:</p>
<code>
h1 {
font-size: 3.4rem;
}
<br/>
@media only screen and (max-width: 960px) {
h1 {
font-size: 5.66666667vw;
}
}
<br/>
@media only screen and (max-width: 564.70588235px) {
h1 {
font-size: 2rem;
}
}
</code>
<p>which allows the H1 on this page to smoothly scale down from 3.4rem font size at 960px and above resolution all the way down to 2rem.</p>
</div>
.ResponsiveText (@MaxResolution,@DesktopSize,@MobileSize) {
@DesktopMediaSize: (@MaxResolution*1px);
@MobileMediaSize: (((@MobileSize*16)/((@DesktopSize*16)/(@MaxResolution/100)))*100px);
font-size: @DesktopSize * 1rem;
@media only screen and (max-width: @DesktopMediaSize) {
font-size: ((@DesktopSize * 16)/(@MaxResolution/100))*1vw;
}
@media only screen and (max-width: @MobileMediaSize){
font-size: @MobileSize*1rem;
}
}
//// Example of usage
h1 { .ResponsiveText(960,3.4,2); }
h2 { .ResponsiveText(960,2,1.5); }
///// Presentation
body { padding: 40px; background: #262933; color: white; }
p { line-height: 1.3; }
div { max-width: 960px; margin: auto; }
code { border: 1px solid black; padding: 20px; display: block; background: white; color: black; }
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.