相关概念与媒体查询.md · lai/21级7班课件

## 课程介绍

一 响应式布局

二 js高级

三 mvc(java)

## vscode 使用

多写写,没诀窍

## 什么是设备像素

像素实际上是一个颜色点，所以又称像素点。大量不同颜色点组成一张图像，因此图像的基本单位是像素px（没有比像素更精细的单位了）。
像素主要用来表示图像大小和显示器分辨率（如1920*1080px）。像素本身的物理尺寸不固定，所以它的物理尺寸没有意义，有意义的是它的数量。

### 什么是逻辑像素

软件达到的像素

![alt](https://img-blog.csdnimg.cn/28b0d7030ac5430ba5428fbe18b2349e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-WkhOWls-W6p-eoi-W6j-WRmOeahOaXpeW4uA==,size_16,color_FFFFFF,t_70,g_se,x_16)

### 为什么像素的物理尺寸不固定

像素本身不是物理世界的单位，是一个相对单位，尺寸可大可小。在高密度的屏幕上像素会变小，显示效果更清晰。因为“像素量px = 像素密度ppi
x 屏幕尺寸in”，同样是1英寸的屏幕，密度越大，像素越多，则单个像素的物理尺寸越小

### 手机的尺寸

就是手机的对角线的长度

## 什么是ppi

![alt](https://s2.51cto.com/images/blog/202112/31105756_61ce71b48b64f79870.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

英寸屏幕上显示的像素量，密度单位。决定图片的物理显示尺寸，只有涉及到显示才有意义。值越大，显示越细腻。
**计算公式：**ppi=屏幕对角线上的像素量px/对角线长度inch = √（屏幕横向像素^2 + 屏幕纵向像素^2）/对角线长度。

## 视口

因为物理像素跟逻辑像素可能不一致，手机上默认以980px(逻辑像素)来表示屏幕的宽度，有没办法让页面的宽度，刚还等于手机的逻辑像素？

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。

不同手机的逻辑分辨率都不同， 但网页宽度为100%；

### 我们如何实现网页的宽度和逻辑分辨率尺寸相同？

![alt](https://img-blog.csdnimg.cn/5d861e0df7ce46a5a71f62812f50424d.png)

viewport：视口
width=device-width：视口宽度 = 设备宽度（逻辑分辨率）
initial-scale=1.0：缩放1倍（不缩放)

## 媒体查询

CSS3媒体查询（Media Query）语法的特性

①使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
②@media 可以针对不同的屏幕尺寸设置不同的样式；
③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 ；
④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询.

### 媒体查询的语法规法

@media mediatype and|not|only (media feature) {
   /* CSS样式 */
}

①用 @media 开头 注意@符号

②mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）

③关键字 and not only
  （1）and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
  （2）not：表示排除某个媒体类型，相当于“非”的意思，可以省略
  （3）only：表示指定某个特定的媒体类型，可以省略

④media feature 媒体特性 必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的：
  （1）width：表示输出设备中页面可见区域的宽度
  （2）min-width：表示输出设备中页面最小可见区域的宽度
  （3）max-width：表示输出设备中页面最大可见区域的宽度

```javascript
<style>
    div {
        height: 200px;
        background-color: yellow;    /* 给div设置背景色为黄色 */
    }
    @media screen and (min-width:600px) {
        div {
            background-color: skyblue;    /* 表示屏幕尺寸大于等于600px时，背景色变为天蓝色 */
        }
    }
    @media screen and (min-width:900px) {
        div {
            background-color: pink;  /* 表示屏幕尺寸大于等于900px时，背景色变为粉色 */
        }
    }
    @media screen and (min-width:1200px) {
        div {
            background-color: red;  /* 表示屏幕尺寸大于等于1200px时，背景色变为红色 */
        }
    }
</style>
<body>
    <div></div>
</body>
```

## 媒体查询+外部链接引入CSS

```

```

## 回顾

物理像素,硬件的,不会变

逻辑像素,软件实现的,可变更

视口通过meta属性让网页的宽度等于逻辑像素

媒体查询可获取设备的一些信息(screen)

## 作业

要求美观点，有大屏（大于980px），中间(750x--980px),小屏<750px，写一些html 可以有图片（背景色）,会根据屏幕展示不同的图片.

lai/21级7班课件

简介

发行版

贡献者

近期动态

lai/21级7班课件 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

lai/21级7班课件