响应式网页设计

定义：

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

解释：

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

实现响应式网页设计的步骤

第一步：设置视口

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

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

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

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

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

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

案例

非响应式网站：

响应式网站
技术：视口+媒体查询+1个html+多套样式

极客公园

响应式适配
技术：视口+js判断+多个html+1套样式

viewport是什么

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

view：是“看”的意思。
Port：是“端口”的意思。
Viewport：翻译为“视口”。
viewport是没有大小的。就是viewport不等于网页可见区域的大小。

设置viewport

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

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

五个属性值

1.width/height：设置视口的宽度或高度。
注意：
示例：属性值为数值，无单位。表示视口的宽度为375px

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

示例：属性值为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规则构成。有以下三种用法，都可以实现相同的效果。

通过媒体查询，我们可以查询到用户设备类型和设备特性。
常见设备类型
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>

响应式网页设计