自适应网页基本原理

页面头部添加一行代码：
< meta name=“viewport” content=“width=device-width, initial-scale=1” />

/针对华为手机图标无法正常比例缩放问题/
@media screen and (max-device-width: 2100px) {请在里面编写代码}
/基本编写顺序/
@media only screen and (max-width:1920px) { 请在里面编写代码；}
@media only screen and (max-width:1660px) { 请在里面编写代码； }
@media only screen and (max-width:1440px) { 请在里面编写代码； }
@media only screen and (max-width:1366px) { 请在里面编写代码； }
@media only screen and (max-width:1199px) { 请在里面编写代码； }
@media only screen and (max-width:959px) { 请在里面编写代码； }
@media only screen and (max-width:767px) { 请在里面编写代码； }
@media only screen and (max-width:599px) { 请在里面编写代码； }
@media only screen and (max-width:479px) { 请在里面编写代码； }
@media only screen and (max-width:374px) { 请在里面编写代码； }