自适应网站样式设置及宽度区域记录

第一步设置meta

<meta name="viewport" content="width=device-width, initial-scale=1">

第二步reponsive.css

/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px)

/* Large Mobile :600px. */
@media only screen and (min-width: 600px) and (max-width: 767px){}

/* small mobile :320px. */
@media only screen and (min-width: 320px) and (max-width: 599px){}