根据页面宽度变化内容自动匹配相应的像素

最新推荐文章于 2020-05-09 17:21:58 发布

廿二又

最新推荐文章于 2020-05-09 17:21:58 发布

阅读量519

点赞数 1

分类专栏： web前端文章标签： rem css html 前端自动缩放

本文链接：https://blog.csdn.net/u014596302/article/details/60885877

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html;charset=UTF-8">
    
<style>
html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "宋体";
	font-weight: bold;


	
	/*font-size: 150%;*//*10 ÷ 16 × 100% = 62.5%*/
	/*font-size: 1.4rem;*//*1.4 × 10px = 14px */
}



@media screen and (min-width:300px) {
	html,body{
	font-size:30%;
	}
}

@media screen and (min-width:500px) {
	html,body {
	font-size:50%;
	}
}

@media screen and (min-width:800px) {
    html,body {
    font-size: 80%;
  }
}
@media screen and (min-width:1000px) {
	html,body {
		font-size: 100%;
	}
}
@media screen and (min-width:1300px) {
	html,body{
		font-size: 130%;
	}
}
 
@media screen and (min-width:1400px) {
	html,body {
    font-size: 140%;
  }
}
@media screen and (min-width:1500px) {
	html,body{
		font-size:150%;
	}
}
@media screen and (min-width:1700px) {
	html,body {
    font-size: 170%;
  }
}
@media screen and (min-width:1900px) {
	html,body {
    font-size: 190%;
  }
}
@media screen and (min-width:2000px) {
	html,body {
    font-size: 200%;
  }
}
@media screen and (min-width:2100px) {
	html,body {
    font-size:210%;
  }
}
@media screen and (min-width:2300px) {
	html,body {
    font-size: 230%;
  }
}
@media screen and (min-width:2500px) {
	html,body {
    font-size: 250%;
  }
}
@media screen and (min-width:2700px) {
	html,body {
    font-size:270%;
  }
}
@media screen and (min-width:3000px) {
	html,body {
    font-size: 300%;
  }
}
@media screen and (min-width:3300px) {
	html,body {
    font-size: 330%;
  }
}
@media screen and (min-width:3500px) {
	html,body {
    font-size: 350%;
  }
}
@media screen and (min-width:3800px) {
	html,body {
		font-size: 380%;
	}
}
@media screen and (min-width:4000px) {
	html,body {
		font-size: 400%;
	}
}
@media screen and (min-width:4200px) {
	html,body {
		font-size: 420%;
	}
}
@media screen and (min-width:4500px) {
	html,body {
		font-size: 450%;
	}
}
@media screen and (min-width:4800px) {
	html,body {
		font-size: 480%;
	}
}


span{
	font-size:3rem;
}
div{

	font-size:5rem;
}

</style>
  </head>
  
  <body>
    This is my HTML page. <br>
    
    <span>
    This is my HTML page. <br>
    </span>
    
    <div>
    这是一个HTML页面. 根据宽度 变化自动匹配 相应的像素
    </div>
  </body>
</html>

廿二又

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据页面宽度变化内容自动匹配相应的像素

MyHtml.html html,body { margin: 0; padding: 0; height: 100%; font-family: "宋体"; font-weight: bold; /*font-size: 150%;*//*10 ÷ 16 × 100% = 62.5%*/ /*font-size: 1.4rem;
复制链接

扫一扫