前端媒体查询知识梳理
媒体查询允许基于设备的不同特性来应用不同的样式申明。媒体查询可以有以下的表现和使用形式：
1. 通过 @media 和 @import 有条件的使用CSS 样式，如：
2. 用media= 属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型。如：
<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />
3. 在JavaScript中使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。
使用@media规则指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。@media可以放在在 CSS 的最顶层，也可以放在@规则的条件规则组中。
每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符（not、and、only和逗号“，”，其中逗号相当于or；not 只能用于一整条媒体查询语句而不能用于媒体特性表达式即not关键字只能放在单条最前面：not(hover)、@media not all and (monochrome)）合并多条媒体查询语句。当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，这对于防止较早的浏览器应用所选样式很有用。媒体查询语句不区分大小写。CSS2中只包括媒体类型，而且CSS3废弃了一些媒体类型（tty, tv, projection, handheld, braille, embossed, 以及 aural）。
媒体类型与媒体特性嵌套。
当媒体类型（可选且默认为all，使用not 或 only 逻辑操作符则必须指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为 true 时，媒体查询将计算为 true，CSS内容才适用。涉及未知媒体类型的查询始终为 false。即使媒体查询返回 false，带有媒体查询附加到其<link>标记的样式表仍将下载。
媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征是否存在、值为多少。媒体特性表达式是完全可选的，但都必须置于括号中。在测试接受范围的任何特性时允许更简洁的媒体查询（比如 400px <= width <= 700px、height > 600px），或者利用支持添加 max- 和 min- 前缀的媒体特性来进行范围检测。
为了最好地调整网站文本大小，当使用长度值<length>[em,rem,px]进行媒体查询时，单位建议使用rem。
由于媒体查询可以洞察用户正在使用的设备的功能（以及扩展的功能和设计），因此有可能滥用它们来构造“指纹”来识别设备，或者至少 将其分类为某些细节，这可能是用户不希望看到的。因此，浏览器可能会选择以某种方式捏造返回的值，以防止它们被用来精确地标识计算机。浏览器可能还会在此区域提供其他措施。例如，如果启用了 Firefox 的“抵抗指纹”设置，则许多媒体查询会报告默认值，而不是代表实际设备状态的值。
background-image用 image-set() 设置响应式的背景图片：
<img>标签用 srcset 和 sizes 实现更好的图片自适应：
框架中使用媒体查询（Bootstrap）：
前端媒体查询知识梳理相关推荐
- 好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
- 前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
- 【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分 最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
- 从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录 从零开始学 ...
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询...
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"><head><meta ...
- 前端基础入门之css像素与视口和媒体查询
文章目录 像素与视口 像素 视口(viewport) 手机像素 完美视口 vw单位 vw 常见的设计图宽度 vw适配 rem 媒体查询 响应式布局 媒体查询 媒体查询语法 媒体类型 媒体特性 断点 像 ...
- 前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端 注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
- pc显示器分辨率 前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结
最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足.因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动 ...
- 前端移动端适配 - 媒体查询适配方案
背景 工作中难免会有写静态页面的需求,有时候移动端适配真的是做的心累,如果自己新做一个页面倒还好,整体布局会按照自己习惯来,但有时候不得不修改别人的代码,尤其是别人没适配好的代码,找样式以及命名规范等 ...
最新文章
- 火狐浏览器设置cookie失败_IE、谷歌Cookie记录失败，火狐成功(IE和Firefox下的Cookie兼容问题)...
- Delphi中类型转换函数
- MAC + Tomcat——部署Web项目时Tomcat启动成功，但部署的Web项目404错误
- pip install python -32_pip安装python模块方法
- 离线手动部署docker镜像仓库——harbor仓库（二）
- PE文件格式和ELF文件格式（上）----PE文件
- 并发-6-wait、notify、Semaphore、CountDownLatch、CyclicBarrier
- SQL敲了mySQL变了_MySQL-Front肿么导出SQL文件
- $.extend()和(function($){….})(jQuery)
- 2018年技术上该怎样努力
- MVVM是什么？谈谈你对MVVM的理解？
- oracle字符串使用函数,oracle函数大全-字符串处理函数
- Bailian2716 全局变量【字符流】
- 从 XML 到 XPath
- python脚本转换为EXE文件
- 关于layuiAdmin 后台管理模板购买授权的问题
- linux安装字体库（simSun为例）
- 分布式机器学习（下）-联邦学习
- 人生这么短，哪有空嫌晚
- viewpage无限轮播