响应式web实战总结已经介绍了一些知识点，这里就不多介绍了；我们这边来了解下如何使用媒体查询写不同的css样式；针对响应式web设计开发，使用媒体查询来适应不同的手机屏幕样式开发时，我们需要写不同的样式，为此我们来分享下我个人开发响应式web页面的经验；针对目前手机的独立像素有320，360，384，400，还有iphone6+是414的独立像素，因此我们只需要针对目前这几种匹配即可；
针对不同的手机有独立的方法
针对手机独立像素是360~399等屏幕的宽度
/*
*但是边距字体大小等还是安装360px来计算
*/
@media(min-width:360px)and(max-width:399px){}
针对手机独立像素是320~359之间的
/*min-width:320px
*针对设备独立像素为320px的css
*min-width:320和max-width:359之间
*/
@media(min-width:320px)and(max-width:359px){}
针对设备独立像素为400px以上的样式。
/*
*针对设备独立像素为400px，边距等等都按400px来计算
*/
@media(min-width:400px)and(max-width:450px){}
针对设备独立像素为640px~999px的css
/*min-width:640px
*针对设备独立像素为640px的css
*min-width:640和max-width:999之间
*边距等按640px来计算
*/
@media(min-width:640px)and(max-width:999px){}
但是在PC端，我们为了适应PC端，所以针对宽度为1000以上也做一个显示处理。
/*最小宽度1000样式
*为了适应PC端所以PC端在设计时候默认以1000px来设计的
*/
@mediascreenand(min-width:1000px){}
结束语：以上就是关于如何使用媒体查询写不同的css样式的全部内容，更多内容请关注学步园。