CSS3 的媒体查询

作者: 肆意木 | 来源:发表于2019-11-18 21:22 被阅读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

相关文章

  • CSS 响应设计-媒体查询

    1、响应式 Web 设计 - 媒体查询 媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询...

  • 浅谈CSS3 响应式布局--Media Queries

    CSS3 Media Queries , CSS3媒体查询。使用 @media 查询,你可以针对不同的媒体类型定义...

  • CSS3 媒体查询

    1、CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,C...

  • CSS3响应式开发

    CSS3多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3...

  • Media queries

    CSS3提供了多种媒体查询的方式 通过dpi

  • IE8 兼容性处理

    Doctype Meta 媒体查询支持 Respond.js CSS3 支持 CSS3 PIE,它支持的特性有这些...

  • 媒体查询

    媒体查询是CSS3添加的新功能。在移动端适配开发中发挥着强大的作用。接下介绍一下媒体查询的用法。 使用 媒体查询有...

  • CSS3中的媒体查询

    一、为什么需要媒体查询 CSS3的媒体查询模块就是为了针对设备特性(width、height等)设置特定的css样...

  • CSS3多媒体查询

    CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示...

  • 自适应页面的实现方式

    CSS3 媒体查询 media媒体查询技术的原理:通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。常用匹...

网友评论

    本文标题:CSS3 的媒体查询

    本文链接:https://www.haomeiwen.com/subject/qyqiictx.html