<!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>
转载请注明原文地址: https://ju.6miu.com/read-7901.html
