您好,登录后才能下订单哦!
这篇文章主要为大家展示了“怎么使用媒体查询写不同的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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。