媒体类型:
all (默认值)
screen
print 打印设备
speech 屏幕阅读器
由于all是默认值可不写,因此以下两种写法效果相同
@media all and (min-width:900px){ } @media (min-width:900px){ }
媒体查询中的逻辑
与 或 非
@media (min-width:900px) and (max-width:1024px){
}
媒体特征表达式
width / max-width / min-witdh
-webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-device-pixel-ratio
orientation: landscape / portrait 横屏 / 竖屏
媒体查询-策略
移动端断点(参考bootstrap)
xs <576px 1
sm 576~768px 2
md 768~992px 4
lg 992~1200px 6
xl >1200px 12
后面的条件满足时,会覆盖前面的条件
PC first
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"title>Document</link rel="stylesheet" href="font/iconfont.css"style> *{margin:0;paddingbox-sizingborder-box} imgwidth100% .rowdisplay flexflex-wrapwrap} /*pc first*/ .col8.33% @media (max-width:1200px) .col{width16.67% } @media (max-width:992px)25% } @media (max-width:768px)50% } @media (max-width:576px) } bodydiv class="row"> ="col"> img src="img/cyy.jpg"divhtml>
mobile first
mobile first @media (min-width:576px) } @media (min-width:768px) } @media (min-width:992px) } @media (min-width:1200px)>
效果同上
一般建议mobile first (移动优先)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。