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

发布时间:2021-09-23 15:04:29 作者:小新
来源:亿速云 阅读:115

这篇文章主要为大家展示了“怎么使用媒体查询写不同的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样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 在html页面写css样式表的方法
  2. 如何在html标签中写css样式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:使用IDEA的示例分析

下一篇:Neo4j怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》