响应式网页设计是什么
定义
- 响应式网页设计就是让网页具备应用css样式，这就是响应式网页设计
解释：
- 响应式网页设计的英文：
- 设计：设想，计划。设计就是把实现想法
- 网页设计：按照一定的设计思路布局网页内容
- 传统网页设计：都是针对pc端而设计的
- 传统网页设计的弊端：在移动互联网时代，在移动互联网时代，传统网页设计不适合小屏幕展示。网页设计网 页设计应而生
- 响应式网页设计是一种设计网页的思想、方法
- 响应：指让我们的网页能自动查顺用户的访问设备，并根据查顺结果应用不同的css样式
实现响应式网页设计的技术手段
- 第一种：通过css判断用户设备
1.视口
<meta name="viewport" content="width=device-width, initial-scale=1.0,">
2.设置媒体查顺，使用Media Query 判断用户设备
- 第二种：通过js判断用户设备
1.视口
2使用js判断用户设备
知识点
- 1.什么是响应式网页设计
- 响应式网页设计是一种设计网页的方法。
- 这种方法主要使用媒体查询让网页具有根据设备的类型和特点应用CSS样式的能力。
- 2.物理像素是什么
- 物理像素就是会发光的二极管。
解释：
- 物理像素就是会发光的二极管。
- 物理像素是一种客观存在的物理单元。
- 物理像素是每一块屏幕实际拥有的像素。
- 每一个物理像素在通电后会发光。
- 每一个物理像素都使用红绿蓝三种光控制。
- 每一块屏幕的物理像素数目在出厂的时候都已经设置固定了。
- 我们常说的手机的物理分辨率就是指物理像素。
- 3.逻辑像素是什么
- 逻辑像素是一种用于描述颜色和位置的信息单元，它是一种虚拟像素，用于通知 物理像素如何发光。
- 4.像素比是什么 （像素比 = 物理像素 / 逻辑像素 )
- 5.如何查询像素比
- window.devicePixelRatio
- 6.如何查询你手机屏幕的逻辑像素( 逻辑像素 = 物理像素 / 像素比)
- 7.viewport是什么
- viewport就是视口的意思，指移动端渲染网页的区域。
- 8.如何设置viewport
- 可以通过<meta> 标签设置移动端视口的大小和缩放。
- 9.iOS的视口默认多宽
- IOS默认视口的宽度为980px
- 10.媒体查询是什么
- 媒体查询是一种查询访问设备的技术
- 11.媒体查询的用法有几种
- 通过为<link>标签设置media属性定位媒体
- 或通过为<style>标签设置media属性定位媒体
- 或通过@media规则在CSS文件中定位媒体
- 12.媒体查询由哪两部分构成
- 由媒体类型和条件表达式组成
- 13.媒体查询的语法是什么
- 每个媒体特性表达式必须用括号括起来。
- 媒体设备和媒体特性表达式之间使用逻辑运算符连接
- and
- not
- only
- , - 媒体查询不区分大小写。
- 14.实现响应式网页设计的步骤
- 第一步：设置视口
- 第二步：设置媒体查询：使用Media Query判断用户访问设备，从而应用css样式
- 15.媒体查询的逻辑运算符有哪几个
- and
- not
- only
- ,
- 16.使用min-width和max-width设置断点时的原则是什么？
- min-width向上兼容
- max-width向下兼容
案例
非响应式网站
响应式网站（视口+媒体查顺+1个html+多套样式）
响应式适配（视口+js判断+1个html+1套样式）
viewport是什么
定义
- viewport是视口的意思，指移动端酸软网页的区域 - view:是”看“的意思
- port:是端口的意思
- vieport:翻译为“视口”
- viewport：是没有大小的。就是vieport不等于网页可见区域的大小
- 视口可以通过meta标签设置
- 如果不设置视口，那么is的视口默认为980px
设置viewport
- 可以通过<meta>标签设置移动视口的大小和缩放。它的语法是：
<meta name='viewport' content='宽度 初始比例 最大比例 最小比例 是否缩放‘
五个属性
第一个
- width/height：设置视口的宽度和高度
- 示例：属性值为数值，无单位。表示视口的宽度为375px
<meta name='viewport' content='width=375'>
- 示例：属性值为device-width，表示把视口的宽度设置为设备可视区域
<meta name='viewport' content='width=device-width'>
第二个
- initial-scale:设置视口的初始比例。
语法：
<meta name='viewport' content='with=device-width, initial-scale=1'>
- 属性值：0.1- 10
- 默认值：1
- 0.1-1：表示缩小
- 1-10：表示放大
媒体查顺是什么
- 媒体查顺是一种用户设备的技术
- 媒体查顺是由media属性和@media规则构成。有以下三种用法，
- media属性可以设置在<style>标签上
- media属性可以设置在<link>标签上
- @media规则可以设置在样式表里
- 通过媒体查顺，我们可以查顺到用户类型和设备特征
常见设备类型
- screen:所有有电子屏幕设备
- print：打印机
- speech：阅读器
- handle：手持设备
- all：所有设备
常见设备特性
- width
- height
- orientation
- hover
- resolution
- aspect-ratio
媒体查顺的语法
meida属性
<style media='查顺规则‘>
</style>
@meida规则
<link href='print.css'media='查顺规则‘>
<link href='screen.css'media='查顺规则‘>
@meida规则
/*css文件*/
@meida 查顺规则 {
/*这里写样式代码*/
}
查顺规则
- 测试工作由媒体类型+媒体特性表达式构成
- 媒体类型和媒体特性表达式使用逻辑操作符（and,not,only,,)链接
- 操作符之间必须有空格m
- 所有的媒体特性表达式必须用小括号括起来
- 不区分大小写
示例
/在横向屏幕/
逻辑运算符
- 逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。
- and :用于将多个媒体特征组合到一个媒体查询中，要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。
- not: 用于否定媒体查询，如果查询将返回 false，则返回 true。如果出现在逗号分隔的查询列表中，它只会否定应用它的特定查询。如果使用 not 运算符，还必须指定媒体类型。
- only:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时，旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。
- ,: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。
viewport就是视口的意思，指移动端渲染网页的区域。
解释：
- view: 是“看”的意思。
- Port: 是“端口”的意思
- Viewport: 翻译为“视口”。
- viewport是没有大小的。就是viewport不等于网页可见区域的大小。
- 视口可以通过meta标签设置
- 在进行响应式网页设计的时候，第一步就是设置视口，即把渲染页面的视口尺寸设置为与设备的可见区域的尺寸一致。
- 设置viewport的主要目的是为了创建更合理的视口尺寸。设置视口是制作响应式网页的第一步。
- 视口是 HTML 5 中的元元素，用于根据用户的设备缩放内容。这对于响应式网页设计很重要。
复习
- js的三个组成部分
- ECMAScript:ES
- DOM:文档对象模型
- NOM:浏览器对象模型
- window.devicepixelRatio
定义：用于查询 - device:设备
- pixel:像素
- Ratio:比例
