CSS3 的媒体查询

众所周知，Bootstrap 最大的特性是自适应，不是那么众所周知的，Bootstrap 自适应的原理是媒体查询，问题来了：什么是媒体查询？

在今天之前，我对这个问题是模模糊糊，在今天之后，我猜我肯定一直可以记住了。

一句话说明，什么是媒体查询：

媒体是设备载体，查询那就是查询当前属于那种设备，目的是让网页在不同的设备上面可以正常加载。

下面就在详细的拆解一下这个知识点。

width、height、max-width / max-height 、min-width / min-width 、orientation: portrait (竖屏模式) | landscape (横屏模式)。

这个时候就引入一个关键单词，media，不过我更觉得它像是一种语法，判断当前设备是否符合期望值，判断条件的关键字有： and、not、only。

与 CSS 差不多，或者就是 CSS 吧，有内联和外联两种引入方式。

内联举例：
@media only screen and (width: 320px) and (height: 568px) {}

外联举例：
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

CSS的媒体查询.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。