Css @media min-width和max-width区别

在使用Css进行媒体查询的时候,经常会用到min-width和max-width

min-width是最小宽度(大于等于)

max-width是最大宽度(小于等于)

先看下面的代码,这是从bootstrap中摘出来的,min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了

bootstrap @media

这是从bootstrap中遍历出来的,min-width来确认分别是

768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了

从上面我们可以看出有几个临界点的分辨率,那么我们就可以轻松的来写自己的自适应代码了

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧

因为如果是1440,由于1440>768那么你的1200就会失效。(PS:@media也遵循Css优先规则
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

Views: 373 Tags: ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注