CSS3媒体查询

家电修理 2023-07-16 17:23www.caominkang.com电器维修

1.定义和使用

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。


2.@media与@media screen区别

@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。

不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效


3.Media Queries工作方式:

在media属性里
screen 只是媒体类型里的一种,其中常用的有
(1)all——用于所有设备   (2)print —— 用于打印机和打印预览  (3)screen——用于电脑屏幕,平板电脑,智能手机等。 (4)speech——应用于屏幕阅读器等发声设备
and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
(min-idth: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

3.1 直接在link中判断设备的尺寸,然后引用不同的css文件


当屏幕的宽度大于等于400px的时候,应用 A.css


当屏幕的宽度大于600小于800px时,应用B.css

3.2 另一种方式,即是直接写在 style 标签里或css文件中
@media screen and (max-idth: 600px) { 
  body {    background: #c;
  }
}

4.Media使用说明举例4.1前端响应式布局最出名的框架莫过于 Bootstrap

1.png


@media (min-idth: @screen-lg-min) { ... }

4.2自适应代码

@media (min-idth: 768px){ //>=768的设备 }
@media (min-idth: 992px){ //>=992的设备 }
@media (min-idth: 1200){ //>=1200的设备 }

注意下顺序,如果你把@media (min-idth: 768px)写在了下面那么就是错误的!因为如果是1440,由于1440>768那么你的1200就会失效。

  • 划重点
    用min-idth时,小的放上面大的在下面,同理如果是用max-idth那么就是大的在上面,小的在下面

4.3在媒体查询代码中包含 max-idth 从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media screen and (min-idth:1200px){}
@media screen and (min-idth: 960px) and (max-idth: 1199px) {  }
@media screen and (min-idth: 768px) and (max-idth: 959px) {  }
@media only screen and (min-idth: 480px) and (max-idth: 767px){  }
@media only screen and (max-idth: 479px) {  }

参考
利用@media与@media screen进行响应式布局



作者pattyzzh
链接https://.jianshu./p/19724be4b344


Copyright © 2016-2025 www.caominkang.com 曹敏电脑维修网 版权所有 Power by