前端是万能的

CSS3 的媒体查询

2019-11-18  本文已影响0人  肆意木

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

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

一句话说明,什么是媒体查询:

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


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

  1. 媒体查询主要查询的是那些属性?

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

  1. 它是怎么查询到这些条件的。

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

  1. 查询到这些不同条件后,它是怎么引入样式的?

与 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
上一篇 下一篇

猜你喜欢

热点阅读