导读
- 响应式网页设计是什么
- 实现响应式网页设计的技术手段
- 案例
Viewport
- viewport是什么
- 设置viewport
Media Query
- Media Query是什么
- 设置Media Query的三种用法
- 媒体查询的语法
- 常见媒体类型
- 常见媒体特性
- 常见逻辑运算符
- 媒体查询示例
响应式网页设计是什么
定义：
响应式网页设计就是让网页具有根据设备类型应用CSS样式的能力。
解释：
- 设计：设想、计划。设计就是把想法实现。
- 网页设计：按照一定的设计思路布局网页内容。
- 传统网页设计：都是针对PC端浏览器而设计的，不具备查询设备的能力，更不能对多种访问设备做出响应。
- 传统网页设计的弊端：在移动互联网时代，传统的网页设计不适合多屏幕时代。响应式网页设计应运而生。
- 响应式网页设计是一种设计网页的思想/方法。
- 响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的CSS样式。
实现响应式网页设计的技术手段
第一种：通过CSS判断用户设备
- 设置视口
- 设置媒体查询：使用Media Query判断用户访问设备
第二种：通过JS判断用户设备
- 视口
- 使用js判断用户访问设备
案例
非响应式网页设计案例
w3school
<meta charset="utf-8">
响应式网页设计：媒体查询
响应式网页设计：适配
Viewport是什么
viewport就是视口的意思，指移动端渲染网页的区域。
解释：
- view: 是“看”的意思。
- Port: 是“端口”的意思
- Viewport: 翻译为“视口”。
- viewport是没有大小的。就是viewport不等于网页可见区域的大小。
- 视口可以通过meta标签设置
- 在进行响应式网页设计的时候，第一步就是设置视口，即把渲染页面的视口尺寸设置为与设备的可见区域的尺寸一致。
- 设置viewport的主要目的是为了创建更合理的视口尺寸。设置视口是制作响应式网页的第一步。
- 视口是 HTML 5 中的元元素，用于根据用户的设备缩放内容。这对于响应式网页设计很重要。
设置Viewport
可以通过<meta> 标签设置移动端视口的大小和缩放。
如果不设置视口的尺寸，移动设备通常会自动优化网页的显示。在iOS系统上视口默认为980px宽。如果你希望实现更加复杂合理的优化，通常需要修改移动设备的默认视口设置。
设置视口属性的语法是：
<meta name="viewport" content="属性列表" />
viewport包含6个属性：
1.width：设置视口的宽度。属性值：
- number：1- 10000。数字表示视口的像素宽度，无单位，不支持负值。比如width=600
- device-width：等于100vw或100%。
<meta name="viewport" content="width:320" />
2.height：设置视口的高度。属性值：
- number：1- 10000。数字表示视口的像素高度，无单位，不支持负值。比如height=600
- device-height：等于100vw或100%。
<meta name="viewport" content="height:640" />
3.initial-scale：控制第一次加载页面时的缩放级别。属性值：
- 0.1 - 10
- 默认值：1。
- 负值：忽略。
<meta name="viewport" content="initial-scale:1" />
4.minimum-scale：控制页面上允许的缩小程度。属性值：
- 0.1 - 10
- 默认值：0.1。
- 负值：忽略。
<meta name="viewport" content="minimun-scale:2" />
5.maximum-scale：控制页面允许放大多少。属性值
- 0.1- 10。
- 任何小于 3 的值都无法访问。
- 默认值：10。
- 负值：忽略。
<meta name="viewport" content="maxinum-scale:6" />
6.user-scalable：控制页面上是否允许放大和缩小操作。属性值:
- 有效值：0、1、no 或 yes。
- 默认值：1，与 yes 相同。
<meta name="viewport" content="user-scalable:yes" />
视口的常规设置方法：
<meta name="viewport" content="width=device-width, initial-scale=1" />
