CSS媒体查询-物理像素-逻辑像素

水深无声 2023-09-28 02:55 139阅读 0赞

### 媒体查询 ###

#### 基本使用 ####

**媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口**。

**你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改你的页面**。

**媒体查询的使用方式主要有三种**：

> 方式一：通过`@import`和媒体查询结合, 实现使用不同的CSS规则；

/* @import是可以和媒体查询结合来使用  媒体查询条件: 当屏幕小于800px时显示 */
    @import url(./css/body_bgc.css) (max-width: 800px);

> 方式二：使用media属性为 <style>, < link>, <source>和其他HTML元素指定特定的媒体类型；

> 方式三：通过@media来使用不同的CSS规则

@media (max-width: 800px) {
      body {
        background-color: orange;
      }
    }

**比较常用的是通过@media来使用不同的CSS规则，目前掌握这个即可；**

#### 媒体类型 ####

**在使用媒体查询时，你必须指定要使用的媒体类型**。

> 媒体类型是可选的，并且会（默认的）应用 all 类型。

**常见的媒体类型值如下**：

> all：适用于所有设备。
> 
> print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。
> 
> screen（掌握）：主要用于屏幕。
> 
> speech：主要用于语音合成器。

**例如如下方式设置媒体类型**

@media screen {
        
    
    }

**被废弃的媒体类型**：

> CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, 以及 aural)；
> 
> 但是他们在Media Queries 4 中已经被废弃，并且不应该被使用；
> 
> aural类型被替换为具有相似效果的speech。

#### 媒体特性 ####

**媒体特性（Media features）描述了 浏览器、输出设备，或是预览环境的具体特征**；

> 通常会将媒体特性描述为一个表达式；
> 
> 每条媒体`特性表达式都必须用括号括起来`；

**例如上面代码的`(max-width: 800px)`就是媒体特性**

**常见的媒体特性如下**:

<table> 
 <thead> 
  <tr> 
   <th>特征</th> 
   <th>价值</th> 
   <th>最小/最大</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>宽度width</td> 
   <td>长度</td> 
   <td>是的</td> 
   <td>渲染表面的宽度</td> 
  </tr> 
  <tr> 
   <td>高度height</td> 
   <td>长度</td> 
   <td>是的</td> 
   <td>渲染表面的高度</td> 
  </tr> 
  <tr> 
   <td>颜色color</td> 
   <td>整数</td> 
   <td>是的</td> 
   <td>每个颜色分量的位数</td> 
  </tr> 
  <tr> 
   <td>设备比例device-aspect-ratio</td> 
   <td>整数/整数</td> 
   <td>是的</td> 
   <td>长宽比</td> 
  </tr> 
  <tr> 
   <td>设备高度device-width</td> 
   <td>长度</td> 
   <td>是的</td> 
   <td>输出设备的高度</td> 
  </tr> 
  <tr> 
   <td>设备宽度device-height</td> 
   <td>长度</td> 
   <td>是的</td> 
   <td>输出设备的宽度</td> 
  </tr> 
  <tr> 
   <td>方向orientation</td> 
   <td>“portrait”或“landscape”</td> 
   <td>不</td> 
   <td>屏幕方向</td> 
  </tr> 
  <tr> 
   <td>分辨率resolution</td> 
   <td>分辨率(" dpi", “dpcm” 或 “dppx”)</td> 
   <td>是的</td> 
   <td>解析度</td> 
  </tr> 
 </tbody> 
</table>

#### 逻辑操作符 ####

**媒体查询的表达式最终会获得一个Boolean值，也就是真（true）或者假（false）**。

> 如果表达式结果为真（true），那么就会生效；
> 
> 如果表达式结果为假（false），那么就不会生效；

**如果有多个条件，我们可以通过逻辑操作符联合复杂的媒体查询**：

> and： and 操作符用于将多个媒体查询规则组合成单条媒体查询
> 
> not： not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。
> 
> only： only运算符仅在整个查询匹配时才用于应用样式。
> 
> , (逗号)：逗号用于将多个媒体查询合并为一个规则。

**比如下面的媒体查询，表示：屏幕宽度大于500，小于8 00的时候， body背景颜色为红色**；

@media screen and (min-width: 500px) and (max-width: 800px) {
        
      body {
        
        background-color: orange;
      }
    }

### CSS常见单位 ###

**前面编写的CSS中，我们经常会使用px来表示一个长度（大小），比如font-size设置为18px， width设置为100px**。

**px是一个长度（length）单位，事实上CSS中还有非常多的长度单位**。

**整体可以分成两类**：

> 绝对长度单位（Absolute length units）；
> 
> 相对长度单位（Relative length units）；

**绝对长度单位**：

> 它们与其他任何东西都没有关系，通常被认为总是相同的大小, 也就是说我们设置了多大就是多大, 是固定的不会改变。
> 
> 这些值中的`大多数在用于打印`时比用于屏幕输出时更有用，例如，我们通常不会在屏幕上使用cm。
> 
> 惟一一个您经常使用的值，就是px(像素)。

**常见绝对长度单位如下**:

<table> 
 <thead> 
  <tr> 
   <th>绝对单位</th> 
   <th>名称</th> 
   <th>等价换算</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cm</td> 
   <td>厘米</td> 
   <td>1cm = 96px/2.54</td> 
  </tr> 
  <tr> 
   <td>mm</td> 
   <td>毫米</td> 
   <td>1mm = 1/10th of 1cm</td> 
  </tr> 
  <tr> 
   <td>Q</td> 
   <td>四分之一毫米</td> 
   <td>1Q = 1/40th of 1cm</td> 
  </tr> 
  <tr> 
   <td>in</td> 
   <td>英寸</td> 
   <td>1in = 2.54cm = 96px</td> 
  </tr> 
  <tr> 
   <td>pc</td> 
   <td>十二点活字</td> 
   <td>1pc = 1/16th of 1in</td> 
  </tr> 
  <tr> 
   <td>pt</td> 
   <td>点</td> 
   <td>1pt = 1/72th of 1in</td> 
  </tr> 
  <tr> 
   <td>px</td> 
   <td>像素</td> 
   <td>1px = 1/96th of 1in</td> 
  </tr> 
 </tbody> 
</table>

**相对长度单位**

> 相对长度单位相对于其他一些东西；
> 
> 比如父元素的字体大小，或者视图端口的大小；
> 
> 使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应；

**常见相对长度单位如下**:

<table> 
 <thead> 
  <tr> 
   <th>相对单位</th> 
   <th>相对于</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>em</td> 
   <td>在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width</td> 
  </tr> 
  <tr> 
   <td>ex</td> 
   <td>字符“x”的高度</td> 
  </tr> 
  <tr> 
   <td>ch</td> 
   <td>数字“0”的宽度</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>根元素的字体大小</td> 
  </tr> 
  <tr> 
   <td>lh</td> 
   <td>元素的line-height</td> 
  </tr> 
  <tr> 
   <td>1 vw</td> 
   <td>视窗宽度的1%</td> 
  </tr> 
  <tr> 
   <td>1 vh</td> 
   <td>视窗高度的1%</td> 
  </tr> 
 </tbody> 
</table>

**我们重点掌握下面这几个相对单位**

> em: 1em相对的是自身font-size的大小, 在除了font-size之外的属性中使用em, 都是相对自己的font-size

<div class="container">
      <div class="box">我是box</div>
    </div>

.container {
        
      font-size: 15px;
    }
    
    .box {
        
      font-size: 20px;
      /* 如果自己没有设置, 那么会继承父元素的font-size */
    
      /* em: 相对自己的font-size */
      width: 10em;
      height: 5em;
      background-color: orange;
    }

> **em特殊情况**: 如果在font-size属性中使用em单位, 那么是相对父元素的font-size的大小

.container {
        
      font-size: 15px;
    }
    
    .box {
        
      /* 在font-size中使用, em相对父元素的font-size */
      font-size: 1em;
    }

> **rem**: 1rem相对html的font-size, html的默认font-size是16px

<div class="box">
      我是box
    </div>

html {
        
      font-size: 15px;
    }
    
    .box {
        
      /* rem相对于html的字体大小 */
      width: 10rem;
      height: 10rem;
      font-size: 1rem;
      background-color: orange;
    }

> **vw/vh**: 1vw/vh相对的是浏览器视口, 1vw/vh可以理解为浏览器宽度/高度的百分之一

.box {
        
      width: 10vw;
      height: 10vh;
      background-color: orange;
    }

### 像素pixel ###

#### 认识像素 ####

**前面我们已经一直在使用px单位了， px是pixel单词的缩写，翻译为像素**。

**那么像素到底是什么呢**？

> 像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；
> 
> pix是英语单词picture的常用简写，加上英语单词“元素” element，就得到pixel；
> 
> “像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

**但是这个1 00个pixel到底是多少呢**？

> 我们确实可以在屏幕上看到一个大小，但是这个大小代表的真实含义是什么呢？
> 
> 我们经常说一个电脑的分辨率、手机的分辨率，这个分辨率和CSS当中的像素又是什么关系呢？

.box {
        
      width: 100px;
      height: 100px;
      width: 10vw;
      height: 10vh;
      background-color: orange;
    }

**这里我们要深入到不同的像素概念中，来理解CSS中的pixel到底代表什么含义**。

#### 像素分类 ####

**像素单位常见的有三种像素名称**：

> 设备像素（也称之为物理像素）；
> 
> 设备独立像素（也称之为逻辑像素）；
> 
> CSS像素；

**设备像素，也叫物理像素**。

> 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
> 
> 我们在购买显示器或者手机的时候，提到的设备分辨率就是物理像素的大小；
> 
> 比如iPhone X的分辨率 1125x2436，指的就是设备像素；

**设备独立像素，也叫逻辑像素**。

> 如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的；
> 
> 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
> 
> 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
> 
> 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、 4k的显示器，对于开发者来说，都是1920x1080的大小。

**CSS像素**

> CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）；
> 
> 毕竟逻辑像素才是面向我们开发者的；

**我们可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率**：

![在这里插入图片描述][bc767c1ad0c841efa8536fd18c080c6d.png_pic_center]

#### DPR-PPI ####

**DPR： device pixel ratio(设备像素比)**

> 2010年， iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕；
> 
> Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
> 
> 在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为`设备像素比`（device pixel ratio）；
> 
> 我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；

**PPI（了解）：每英寸像素（英语： Pixels Per Inch，缩写： PPI）**

> 通常用来表示一个打印图像或者显示器上像素的密度；
> 
> 前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；

[bc767c1ad0c841efa8536fd18c080c6d.png_pic_center]: https://img-blog.csdnimg.cn/bc767c1ad0c841efa8536fd18c080c6d.png#pic_center