您可以点击上面的标签下载需要的软件,如果想要查看更多工具,可以点击上面的【实验室】。

CSS中通过media query + -webkit-transition来实现字体大小自适应

div{    

font-size: 40px;   

 -webkit-transition:font-size 0.2s ease-out; 

}

@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}

@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}

@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}

@media only screen and (max-width: 900px) { div{ font-size: 36px; }}

@media only screen and (max-width: 800px) { div{ font-size: 35px; }}

@media only screen and (max-width: 700px) { div{ font-size: 34px; }}

@media only screen and (max-width: 600px) { div{ font-size: 33px; }}

@media only screen and (max-width: 500px) { div{ font-size: 32px; }}

@media only screen and (max-width: 400px) { div{ font-size: 31px; }}

@media only screen and (max-width: 300px) { div{ font-size: 30px; }}


 
评论(2)
© MYts | Powered by LOFTER