无Sass的Resize字体Javascript

最新推荐文章于 2024-02-21 11:01:40 发布

奋进中的巨人

最新推荐文章于 2024-02-21 11:01:40 发布

阅读量705

点赞数

分类专栏：前端技术文章标签： Javascript 闭包响应式字体 Jquery

本文链接：https://blog.csdn.net/TJHAIXIN/article/details/42318487

版权

前端技术专栏收录该内容

18 篇文章 0 订阅

订阅专栏

//JS的新版浏览器matchMedia的查询，与CSS的@media有一拼。
alert(window.matchMedia('(max-width:360px)').matches);
$(function(){
	var x = $(window).width();
	$(window).resize(function(){
		if($(window).width() >= x){
			$("body").css("fontSize",parseFloat($("body").css("fontSize")) + 0.01);
		}
		else
		{
			$("body").css("fontSize",parseFloat($("body").css("fontSize")) - 0.01);			
		}
		x = $(window).width();
	});
});

/* Scss Document */
$width:200px;
@while $width > 0{
   @media only screen and (max-width:$width){
       body{
           font-size:24px - 0.1*(200 - $width);
       }
   }
   $width: $width - 1;
}

if(window.matchMedia("(min-width:361px) and (max-width:768px)").matches){
   alert(768);
}
if(window.matchMedia("(max-width:360px)").matches){
   alert(360);
}