@media only screen and (max-width: 310px) and (min-width: 300px) {html {font-size: 9px}}
@media only screen and (max-width: 320px) and (min-width: 310px) {html {font-size: 9px} }
@media only screen and (max-width: 360px) and (min-width: 320px) {html {font-size: 9px}.filter-menu-list ul li i{margin-top:-.1rem;} .filter-menu-list ul li em{margin-top:-.4rem;}}
@media only screen and (max-width: 360px) and (min-width: 350px) {html {font-size: 10px} }
@media only screen and (max-width: 480px) and (min-width: 360px) {html {font-size: 10px}.filter-menu-list ul li i{margin-top:-.1rem;} .filter-menu-list ul li em{margin-top:0rem;}}
@media only screen and (max-width: 480px) and (min-width: 470px) {html {font-size: 13.33333px}}
@media only screen and (max-width: 560px) and (min-width: 480px) {html {font-size: 13.33333px}}
@media only screen and (max-width: 570px) and (min-width: 560px) {html {font-size: 15.83333px}}
@media only screen and (max-width: 640px) and (min-width: 570px) {html {font-size: 15.83333px}}
@media only screen and (max-width: 640px) and (min-width: 630px) {html {font-size: 17.77778px}}
@media only screen and (max-width: 710px) and (min-width: 640px) {html {font-size: 17.77778px} }

the above media query was used in the previous project, so now we can only continue to use this method to fit. The design drawing is 750px. Suppose there is an element with a width of 600px, how can it be converted into rem, um, 600/10px or 600/xxx? it doesn"t seem to be quite right with the design drawing.