About HTML, css3 adaptive screen, adaptive width, and css3 adaptive

About HTML, css3 adaptive screen, adaptive width, and css3 adaptive

Set the css style to be displayed at different resolutions:

@media screen and (min-width:1080px){  .box{ width: 1080px;}.content{width: 1040px;}  .img{height:180px;}  .img{font-size: 48px;line-height: 180px;}  .title{font-size: 46px;line-height: 100px;}  .detail{font-size: 20px;}}@media screen and (min-width: 900px) and (max-width: 1079px) {  .box{ width: 900px; }.content{width: 860px;}  .img{height:160px;}  .img{font-size: 40px;line-height: 160px;}  .title{font-size: 38px;line-height: 80px;}  .detail{font-size: 17px;}}@media screen and (min-width: 768px) and (max-width: 899px) {  .box{ width: 768px; }.content{width: 728px;}  .img{height:140px;}  .img{font-size: 32px;line-height: 140px;}  .title{font-size: 30px;line-height: 60px;}  .detail{font-size: 14px;}}@media only screen and (min-width: 480px) and (max-width: 767px){   .box{ width: 480px; }.content{width: 440px; }  .img{height:98px;}  .img{font-size: 24px;line-height: 100px;}  .title{font-size: 22px;line-height: 40px;}  .detail{font-size: 11px;}}@media only screen and (max-width: 479px) {  .box{ width: 300px; }.content{width: 300px;}  .img{height:60px;}  .img{font-size: 16px;line-height: 60px;}  .title{font-size: 14px;line-height: 20px;}  .detail{font-size: 8px;}}

If it is on that width, for example, the screen width is 900