怎么使用媒体查询写不同的css样式

这篇文章主要为大家展示了“怎么使用媒体查询写不同的css样式”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用媒体查询写不同的css样式”这篇文章吧。

　　响应式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样式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！