响应式网页设计是什么

定义：响应式网页设计就是让网页具备根据设备应用CSS样式的能力

解释：

响应式网页设计英文：Responsive Wed
设计：设想、计划。设计就是实线想法。
网页设计：按照一定的设计思路布局网页内容。
传统网页设计：都是针对PC端浏览器而设计的。
传统网页设计的弊端：不能根据用户设备应用样式。在移动互联网时代，传统的网页设计不适合小屏幕展示。响应式网页设计应运而生。
响应式网页设计是一种设计网页的思想/方法。
响应：指让我们的网页能够自动响应用户代理。并根据查询结果应用不同的CSS样式

实现响应式网页设计的技术手段

第一种：通过CSS判断用户设备。

设置视口

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

设置媒体查询：使用Media Query判断用户访问设备

第二种：通过JS判断用户设备。

视口
使用JS判断用户访问设备

案例

非响应式网站：

响应式网站：

技术：视口＋媒体查询+1个HTML+多套样式

响应式适配

技术：视口+JS判断+多个HTML+1套样式

Viewport是什么

定义：viewport就是视口的意思，指移动端渲染网页的区域。

解释：

view：是“看”的意思
Port：是“端口”的意思
Viewport：翻译为“视口”。
viewport是没有大小的。就是viewport不等于网页可见区域的大小。
视口可以通过<meta>标签设置
如果没有设置，则按照默认980设置

设置viewport

可以通过<meta>标签设置移动端视口的大小和缩放。它的语法是：

<meta name='viewport' content='宽度/高度 初始比例 最大比例 最小比例 是否缩放'>

五个属性值

1.width/height：设置视口的宽度或高度。

注意：如果不设置视口，那么iOS的视口默认为980px宽

示例：属性值为数值，无单位。表示视口的宽度为375px

<meta name='viewport' content='width=375'>

示例：属性值为device-width。表示把视口的宽度设置为设备可视域宽。

<meta name='viewport' content='width=device-width'>

2.initial-scale:设置视口的初始比例。

语法:

<meta name='viewport' content='width=device-width, initial-scale=1'>

属性值：0.1-1

默认值：1

0.1-1：表示缩小

1-10：表示放大

3.maximum-scale：设置视口最大缩放比

<meta name="viewport" content="width=device-width,initial-scale=1，minimum-scale=1,maximum-scale=10" />

4minimum-scale：设置视口最小缩放比

<meta name="viewport" content="width=device-width,initial-scale=1，minimum-scale=2" />

5user-scalable：设置视口是否允许缩放

<meta name="viewport" content="width=device-width,initial-scale=1，minimum-scale=1,maximum-scale=5,user-scalable=0" />

参数	注释
user-scalable=0/1	0相当于no，1相当于yes

媒体查询是什么

媒体查询是一种查询用户设备和设备特性的技术。
媒体查询是由media属性和@media规则构成。以下三种用法，都可以实现相同的效果。
- medla属性设置在<style>标签上
- meala属性可以设置在<link>标签上
- @meida规则设置在样式表里
通过媒体查询，我们可以查询到用户设备类型和设备特性。
常见设备类型
- screen ：所有有电子屏幕设备
- print ：打印机
- speech ：阅读器
- handle ：手持设备
- all ：所有设备
常见的设备特性
- width
- height
- orientation
- hover、
- resolution
- aspect-ratio

媒体查询的语法

media属性

<style media='查询规则'>
</style>

media属性

<link href='print.css' media='查询规则'>
<link href='screen.css' media='查询规则'>

@media规则

/*CSS文件*/
@media 查询规则{
    /*这里写代码*/
}

查询规则

查询规则由媒体类型+媒体特性表达式构成。
媒体类型和媒体特性表达式使用逻辑操作符(and、not、only、,)连接，操作符前后必须有空格。
所有的媒体特性表达性必须用小括号括起来
不区分大小写。

示例

/*在横向屏幕设备上，让body的背景色显示为红色*/
/*在竖向屏幕设备上，让body的背景色显示为蓝色*/
/*landscape：横屏*/
@media screen and (orientation:landscape){
    body{
        background-color:red;
    }
}
/*portrait：竖屏*/
@media screen and (orientation:portrait){
    body{
        background-color:blue;
    }
}

/*是否支持输入设备的悬停效果*/
<style media="<hover:hover)">
a:hover{
    color:white;
    background-color:red
};
</style>

示例：断点修改背景色

/*查询视口范围min，查询max范围将顺序反过来*/
<style>
      header,
      footer {
        background-color: black;
        color: #fff;
        height: 100px;
      }
      body{
        background-color: blueviolet;
      }
      @media screen and (min-width:576px){
        body{
            background-color: blueviolet;
        }
      }
      @media screen and (min-width:768px){
        body{
            background-color: goldenrod;
        }
      }
      @media screen and (min-width:992px){
        body{
            background-color: palevioletred;
        }
      }
      @media screen and (min-width:1200px){
        body{
            background-color: blue;
        }
      }
      @media screen and (min-width:1400px){
        body{
            background-color: greenyellow;
        }
      }
</style>

复习JS

js的三个组成部分

ECMAScript：ES
DOM：文档对象模型：就是一些文档方法的集合。让你通过这些方法可以操作文档。
BOM：浏览器对象模型：就是一些与浏览器有关的方法集合。让你通过这些方法可以操作浏览器窗口。

window.devicePixelRatio

device：设备
Pixel：像素
Ratio：比例
devicePixelRatio：设备像素比

响应式网页设计