/*屏幕小于600px的PC浏览器, iPhone和mobiles时的样式*/ @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { //css 代码写在这里 } /*屏幕大于或等于900px是时的布局样式*/ @media screen and (min-width: 920px) { //css 代码写在这里 } /*屏幕大于或等于1350px的布局样式*/ @media screen and (min-width: 1350px) { //css 代码写在这里 } /*屏幕大于或等于1500px时的布局样式*/ @media screen and (min-width: 1500px) { //css 代码写在这里 } /*iPhone*/ @media only screen and (max-device-width: 480px) { //css 代码写在这里 } /*iPad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { //css 代码写在这里 }