响应式
响应式网页设计是什么？
定义：
响应式网页设计就是让网页具备根据备设备应用css样式的能力，这就是响应式网页设计。
解释：
- 响应式网页设计：设想，计划。设计就是把想法实现
- 网页设计：按照一定的设计思路布局网页内容。
- 传统网页设计都是针对pc端浏览器设计。
- 传统网页设计的弊端：不能根据备设备应用css样式的能力，在移动互联网时代。传统网页设计不适合小屏幕展示。响应式网页设计应运而生。
- 响应式网页设计是一种设计网页的思想/方法
- 响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的CSS样式。
实现响应式网页设计的技术手段
第一种：通过CSS判断用户设备
- 设置视口
- 设置媒体查询：使用Media Query判断
第二种：通过js判断用户设备
- 视口
- 使用js判断
实现响应式网页设计的步骤
- 设置视口
<meta name="viewport" content="width=devise-width">
- 设置媒体查询
媒体查询是什么？
媒体查询是一种查询用户设备的技术
-
媒体查询是由
media属性和media规则构成有以下三种用法，可以实现相同效果：-
media属性设置在<style>标签上 -
media属性设置在<link>标签上 -
@media规则可以设置在样式表里。
-
通过媒体查询，我们可以查询到用户设备类型和设备特性。
-
常见设备类型
- screen:屏幕设备
- print:打印机
- speech：阅读器
- handle：手持设备
- all：所有设备
-
常见设备特性
- width
- height
- orientation
- hover
- resolution
- aspect-ratio
-
媒体查询语法
meida属性
<style media='查询规则'> </style>media属性
<link href="print.css" media='查询规则'> <link href="screen.css" media='查询规则'>@media规则
@media 查询规则{ /*这里写代码*/ }
查询规则
- 查询规则由媒体类型+ 媒体特性表达式构成。
- 媒体类型和媒体特性表达式使用逻辑操作符链接操作符之间必须有空格
- 所有的媒体特性表达式必须用小括号括起来
- 不区分大小写
示例
/*在横向屏幕设备显示红色*/
/*在竖向屏幕设备显示蓝色*/
@media screen and (orientation:landscape){
/*这里写样式代码*/
}
案例：
非响应式网站：
响应式网站：(视口+媒体查询+一个html+多套样式)
响应式适配(视口+js判断+多个html+一套样式)
vieport是什么
定义；
viewport指移动端渲染网页的区域、
解释：
view:是‘看’的意思
Port是‘端口的意思’
viewport：翻译为‘视口’
viewport是没有大小的，viewport不等于网页可见区域大小
视口可以通过
meta标签设置
设置viewport
可以通过meata标签设置移动端视口的大小和缩放。他的语法是：
<meta name="viewport" content="宽度/高度 初始比例 最大比例 最小比例 是否缩放"
五个属性值
width/height:设置视口的宽度或高度
示例：属性值为数值，无单位。表示视口的宽度为375px
<meta name="viewport" content="width=375"
注意：如果不设置视口，那么iOS的视口默认为980px宽
示例：属性值为device-width。表示把视口的宽度设置为设备可视区域宽
<meta name="viewport" content="width:device-width">
2.initial-scale：设置视口的初始比例
语法：
<meta name="viewport" content="width=device-width, initial-scale=1">
属性值：0.1~10
默认值1
0.1-1：表示缩小
1-10：表示放大
复习
js的三个组成部分
- ECMAScript
- DOM:文档对象模型
- BOM:浏览器对象模型
window.devicePixelRatio
定义：用于查询设备像素比
devise：设备
pixel：像素
ratio：比例
devicePixelRatio：简称dpr
知识点
- 什么是响应式网页设计
- 什么是响应式网页
- 物理像素是什么
- 逻辑像素是什么
- 是信息
- 像素比是什么（像素比=物理像素/逻辑像素）
- 如何查询像素比
- 如何查询屏幕的逻辑像素（逻辑像素 = 物理像素 / 像素比）
- vieport是什么
响应式布局|适配布局|流式布局
响应式布局（RWD）：Respomsive Web Design
适配布局（AWD）：Adapt（适应的）Web Design
流式布局（LWD）：Liquid（液体）Web Design
