这篇文章主要为大家展示了“怎么使用媒体查询写不同的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样式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
