4.响应式开发

亮哥666
55 阅读7分钟

响应式设计

本文主要包含以下内容：

  • 响应式设计介绍
  • 媒体查询介绍
  • 媒体类型
  • 媒体特性
  • 逻辑运算符
  • 示例一
  • 示例二
  • 外部引入媒体查询样式

响应式设计介绍

在前面，我们已经介绍了关于移动端网页的适配问题，再一次明确所谓适配，就是指移动端的网页在不同的设备下看上去都是正常的。

而这一章我们要学习响应式设计。什么叫做响应式呢？

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

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

例如星巴克的官网就是一个响应式的设计。

响应式设计在刚推出时非常的火，因为那个时候也没有什么专门针对移动设备设计的页面，而且一套代码就能解决 PC、平板和手机不同设备的各种布局，如果能把 PC 端的页面稍微改一改就变成手机和平板的页面，自然是很好的。

但是并不是说响应式设计就没有缺点。响应式设计的缺点如下：

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

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

因此，响应式设计在今天看来是有一点没落了，特别是对于互联网公司，还是宁愿 PC 和移动端不同的代码分开，然后移动端再去解决适配的问题即可。

但是对于一些产品型的公司（例如上面的星巴克），因为网站只是用于展示公司的产品为主，所以仍然还在使用响应式设计。

前面也说了，响应式设计主要依托于 CSS3 的媒体查询，所以接下来我们来对媒体查询进行一个详细的介绍。

媒体查询介绍

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

关于媒体查询，可以在其官网 drafts.csswg.org/mediaquerie… 上面查询到最新的内容。

image-20220311101004150

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

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

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

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

媒体类型

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

  • 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;
	}
}

媒体特性

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

常见的媒体特性有：

  • 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;
	}
}

逻辑运算符

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

  • 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;
	}
}

示例一

接下来我们将上面所讲的媒体查询的知识串起来，做一个有趣的小案例：

<div></div>

div {
    padding: 50px 0;
    border: 1px solid #000800;
}

div::after {
    content: '这是一个房子'
}

@media all and (max-width:1000px) {
    div {
        background: #1177bb;
    }

    div::after {
        content: "哇，房子好大哦，可以放下炕了！";
    }
}

@media (max-width:800px) {
    div {
        background: #aeaeae;
    }

    div::after {
        content: "喔，房子变小了，只能放一张双人床";
    }
}

@media (max-width:500px) {
    div {
        background: #46ae46;
    }

    div::after {
        content: "哎，房子更小了，只能放一张单人床"
    }
}

@media (max-width:300px) {
    div {
        background: #ff8cff;
    }

    div::after {
        content: "咦！房子也忒小了吧，床都放不下！";
    }
}

示例二

下面仍然是一个媒体查询的示例：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

body {
    margin: 0;
}

div {
    width: 100px;
    height: 100px;
    background: green;
    float: left;
    border: 1px solid #000;
    box-sizing: border-box;
}

/* 200-400 */
@media (min-width:200px) {
    div {
        width: 100%;
    }
}

/* 400-600 */
@media (min-width:400px) {
    div {
        width: 50%;
    }
}

/* 600-800 */
@media (min-width:600px) {
    div {
        width: 33.3%;
    }
}

/* 800-1000 */
@media (min-width:800px) {
    div {
        width: 25%;
    }
}

/* 1000以上 */
@media (min-width:1000px) {
    div {
        width: 20%;
    }
}

外部引入媒体查询样式

最后我们来看一下引入媒体查询的方式。

总结起来有 3 种：

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);

前面第一种方式是在当前文件中使用媒体查询，我们之前的示例都是采用的这种方式。

而第二和第三种则是从外部引入媒体查询的样式。

我们可以将上面的示例二稍作修改，首先创建不同的样式文件。

image-20220311101146403

200.css

div{
    width: 100%;
}

400.css

div{
    width: 50%;
}

600.css

div{
    width: 33.3%;
}

800.css

div{
    width: 25%;
}

1000.css

div{
    width: 20%;
}

之后在 HTML 文件中，如果是按照第二种引入方式，则是：

<link rel="stylesheet" href="css/200.css" media="all and (min-width:200px)">
<link rel="stylesheet" href="css/400.css" media="(min-width:400px)">
<link rel="stylesheet" href="css/600.css" media="(min-width:600px)">
<link rel="stylesheet" href="css/800.css" media="(min-width:800px)">
<link rel="stylesheet" href="css/1000.css" media="(min-width:1000px)">

如果是按照第三种引入方式，则是：

@import url('css/200.css') (min-width:200px);
@import url('css/400.css') (min-width:400px);
@import url('css/600.css') (min-width:600px);
@import url('css/800.css') (min-width:800px);
@import url('css/1000.css') (min-width:1000px);

需要注意采用这种外部引入方式时，引入的样式必需放在上面，并且 style 里面的样式不要和下面的样式发生冲突。

-EOF-

avatar
文章
阅读
粉丝