<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.