响应式设计

响应式设计介绍

一、概念

• 实际上是指一套代码能够在不同的设备下有着不一样的表现。

• 响应式设计依托于 CSS3 中的媒体查询，通过查询当前设备的一个尺寸信息，然后应用不同的样式。

二、优势

• 一套代码就能解决 PC、平板和手机不同设备的各种布局

三、缺点

• 代码冗余，有一些东西是特定 PC 端有，有一些东西是特定手机端有，但是因为是一套代码，因此无论是 PC 端还是手机平板端，这些代码都会有

• 移动端和 PC 端还是有一定的差异性，比如移动端可以两根手指放大页面，而这个在 PC 端是没有的，随着移动端的代码和 PC 端差异越大，使用一套代码就会越感到力不从心

媒体查询

一、介绍

所谓媒体查询，指的就是根据一个或多个基于设备类型、具体特点和环境来应用样式。

官网: https://drafts.csswg.org/mediaqueries/

概括起来，学习媒体查询主要包含以下的内容：

1. 媒体类型
2. 媒体特性
3. 逻辑运算符

另外，在使用媒体查询时，需要注意以下几点：

• 网页宽度自动调整
• 尽量少使用绝对宽度
• 字体的大小使用相对单位（rem、em）
• 布局尽量使用流式布局

二、内容

1、媒体类型

首先我们来看媒体类型，具体有如下的类型：

• all：所有设备
• print：打印机设备
• screen：彩色的电脑屏幕
• speech：听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

注意：tty、tv、projection、handheld、braille、embossed、aural 等几种类型在媒体查询 4 中已经废弃

下面是一个简单的示例：

<div></div>

div{
	width: 200px;
	height: 200px;
	background: green;
}
/* 在所有设备中生效 */
@media all{
	div{
		width: 300px;
		height: 300px;
		background: red;
	}
}
/* 在打印机设备中生效 */
@media print{
	div{
		width: 300px;
		height: 300px;
		background: blue;
	}
}
/* 在彩色电脑屏幕中生效 */
@media screen{
	div{
		width: 400px;
		height: 400px;
		background: pink;
	}
}

2、媒体特性

所谓媒体特性，就是指在确定了设备的情况下，具体再根据细分条件进行分类。

常见的媒体特性有：

• width：宽度

• min-width：最小宽度，宽度只能比这个值大

• height：高度

• max-width：最大宽度，宽度只能比这个值小

• orientation：方向

  • landscape：宽度大于高度（横屏）
  • portrait：高度大于宽度（竖屏）

• aspect-ratio：宽高比

• -webkit-device-pixel-ratio：像素比（webkit 内核私有的属性）

下面是关于媒体特性的一个简单示例：

<div></div>

/* 屏幕的尺寸在400-500之间条件满足 */
div{
	width: 100px;
	height: 100px;
	background: red;
}

/* 屏幕尺寸大于500的时候条件满足 */
@media (min-width:500px){
	div{
		background: green;
	}
}

/* 屏幕尺寸小于400的时候条件满足 */
@media (max-width:400px){
	div{
		background: blue;
	}
}

@media (orientation:landscape){
	div{
		width: 400px;
		height: 100px;
	}
}
@media (orientation:portrait){
	div{
		width: 100px;
		height: 400px;
	}
}

/* 800*600的时候宽高比为4:3 */
@media (aspect-ratio:4/3){
	div{
		border: 10px solid #000;
	}
}

/* 屏幕的像素比为2的时候条件满足 */
@media (-webkit-device-pixel-ratio:2){
	div::after{
		content: '媒体查询';
		font-size: 50px;
	}
}

3、逻辑运算符

在媒体查询中，还支持逻辑运算符，具体有：

• and：合并多个媒体类型（并且的意思）
• , 号：匹配某个媒体查询（或者的意思）
• not：对媒体查询结果取反
• only：仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

下面是关于逻辑运算符的示例：

<div></div>

div{
	width: 200px;
	height: 200px;
	background: red;
}

/* 所有设备、宽度必需大于700px、横屏，这三个条件同时满足才为true */
@media (min-width:700px) and (orientation:landscape){
	div{
		background: green;
	}
}

/* 屏幕尺寸要小于800px, 横屏，这两个只要有一个满足，整个条件就会满足*/
@media (max-width:800px),(orientation:landscape){
	div{
		background: pink;
	}
}

/* 屏幕的尺寸大于800，这个条件才能成立 */
@media not all and (max-width:800px){
	div{
		background: blue;
	}
}

/* 彩色的屏幕，宽度大于1000px，这两个条件同时满足，整体条件才满足 */
@media only screen and (min-width:1000px){
	div{
		background: grey;
	}
}

三、使用方式

1. 在样式里使用

@media all{
	div{
		width: 100px;
	}
}

2. 在 link 标签里使用

<link rel="stylesheet" href="1.css" media='all'>

3. 在 import 里使用

@import url('1.css') (min-width:200px);