前端因不会响应式而毕业了？怎么将页面变得像路飞一样，一套代码兼容多个终端。

什么是响应式呢？

一般企业定制官网都是响应式的网站，而有的小伙伴还是不会来看看吧。

响应式简单来说一套代码能够兼容多个终端（平板，手机，pc），它的原理就是在不同的屏幕尺寸下，通过 css3 的媒体查询新特性来实现的，它可以在同的屏幕尺寸来去响应不同的css代码。
响应式需要一个父级来作为容器，来配合子元素实现变化效果，然后就可以利用媒体查询去改变布局容器的大小，然后再去改变里面子及元素的布局，大小，排列，这样就可以不同的尺寸现实不同的页面效果了。

响应式的布局尺寸

超小屏幕（手机小于 768px ）设置宽度 100%
小屏幕（平板，大于768px）设置宽度 750px（为什么宽度会小一些是因为两边要留白）
中等屏幕（桌面显示器，大于等于992px）宽度设置970px
大屏幕（大桌面显示器，大于等于1200px）宽度设置 1170px

响应式常用的属性

媒体类型(media type) ：常用all，screen，print。

all 所有设备
screen 彩色电脑屏幕
print 文档打印或者打印预览模式
speech 演讲
tv 电视
speech  用于屏幕阅读器

多媒体特性 media feature

max-width 定义输出设备中的页面最大可见区域宽度。
min-width 定义输出设备中的页面最小可见区域宽度。
min-aspect-ratio  定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width  定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height  定义输出设备中的页面最小可见区域高度。
min-monochrome  定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution  定义设备的最小分辨率。
monochrome  定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。（检测设备目前处于横向还是纵向状态。）
resolution  定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan  定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。
height  定义输出设备中的页面可见区域高度。

and / not / only / all

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

扫描二维码关注公众号，回复： 14600487 查看本文章

only: 用来定某种特别的媒体类型。

all: 所有设备，这个应该经常看到。在Media Query中如果没有明确指定Media Type，那么其默认为all

可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

实现横屏和竖屏的媒体查询

/* 竖屏 */

@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
/* 横屏 */

@media screen and (orientation: landscape) { 对应样式 }

可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中。style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上

逻辑操作符 and：

合并多个媒体属性

eg：@media screen and (min-width: 600px) and (max-width:100px)
合并多个媒体属性或合并媒体属性与媒体类型, 一个基本的媒体查询，即一个媒体属性与默认指定的screen媒体类型

指定备用功能：

eg：@media screen and (min-width: 769px), print and (min-width: 6in)
  
没有or关键词可用于指定备用的媒体功能。相反，可以将备用功能以逗号分割列表的形式列出，这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备。（逗号代表或）

指定否定条件：

eg：@media not screen and (monochrome)

要指定否定条件，可以在媒体声明中添加关键字not，不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备。

css3 media 的媒体查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    /* 
      响应式的布局尺寸,这个是根据领导的需求来定义的 
     */

    /* - 超小屏幕（手机小于 768px ）设置宽度 100%  */
    @media screen and (max-width: 768px) {
        .container {
            width: 100%;
            background-color: skyblue;
        }

        .container ul {
            flex-wrap: wrap;
        }

        .container ul li {
            width: 33.33%;
            height: 30px;
            line-height: 30px;
        }
    }

    /* - 小屏幕（平板，大于768px）设置宽度 750px（为什么宽度会小一些是因为两边要留白 ） */
    @media screen and (min-width: 768px) {
        .container {
            width: 750px;
            background-color: blue;
        }
        .container ul {
            justify-content: space-around;
            align-items: center;
        }

        .container ul li {
            width: 100px;
            height: 30px;
            line-height: 30px;
        }
    }

    /* - 中等屏幕（桌面显示器，大于等于992px）宽度设置970px */
    @media screen and (min-width: 992px) {
        .container {
            width: 970px;
            background-color: pink;
        }
        .container ul {
            justify-content: space-around;
            align-items: center;
        }

        .container ul li {
            width: 100px;
            height: 30px;
            line-height: 30px;
        }
    }

    /*  - 大屏幕（大桌面显示器，大于等于1200px） 宽度设置 1170px  */
    @media screen and (min-width: 1200px) {
        .container {
            width: 1170px;
            background-color: red;
        }

        .container ul {
            justify-content: space-around;
            align-items: center;
        }

        .container ul li {
            width: 100px;
            height: 30px;
            line-height: 30px;
        }
    }

    .container {
        height: auto;
        margin: auto;
    }

    .container ul {
        display: flex;
    }
</style>

<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>

</html>

Bootstrap 响应式框架

Bootstrap 提了栅格布局（指的就是把页面平均分成12个列） container 宽度是固定的，在不同的屏幕下container 的宽度是不同的，看以上代码。

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就河以放入这些创建好的布局中。
传送门：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

	超小屏幕（手机）<768px	小屏设备（平板）>= 768px	中等屏幕（桌面）>= 992px	宽设备（大桌面显示器）>= 1200px
.container最大宽度	自动（100%）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	12	12	12

行(row)必须放到container布局容器里面我们实现列的平均划分需要给列添加类前缀

xs-extra small:超小；sm-small:小；md-medium:中等；lg-large:大；

在不同的屏幕尺寸下显示不同的尺寸列(column)大于12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的padding 可以同时为一列指定多个设备的类名，以便划分不同份数例如class="col-md-4co-sm-6"

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    [class^="col"] {
        border: 1px solid rgb(177, 171, 171);
    }

    * {
        padding: 0;
        margin: 0;
    }

    .container .row:first-of-type {
        background-color: pink;
    }
</style>

<body>
    <div class="container">
        <!-- 平均正好12分
          col-lg-3  超大屏的时候布局 分成 4 份 正好铺满
          col-md-4  中等的时候将布局 分成 3 份 会有溢出
          col-sm-6  平板的时候将布局 分成 2 份 正好铺满
          col-xs-12 手机的时候将布局 分成 1 份 正好铺满
        -->
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                平均正好12分，铺满整个container 容器
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                栅格布局
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                栅格布局
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                栅格布局
            </div>
        </div>
        <br>
        <!-- 中屏幕下   col-md-4  中等的时候将布局 分成 3 份 会有溢出-->

        <div class="row">
            <div class="col-md-4">
                col-md-4 中等的时候将布局 分成 3 份 会有溢出
            </div>
            <div class="col-md-4">
                栅格布局
            </div>
            <div class="col-md-4">
                栅格布局
            </div>
            <div class="col-md-4">
                栅格布局
            </div>
        </div>
        <br>
        <!-- 平板下 col-sm-6  平板的时候将布局 分成 2 份 正好铺满-->

        <div class="row">
            <div class="col-sm-6">
                col-sm-6 平板的时候将布局 分成 2 份 正好铺满
            </div>
            <div class="col-sm-6">
                栅格布局
            </div>
            <div class="col-sm-6">
                栅格布局
            </div>
            <div class="col-sm-6">
                栅格布局
            </div>
        </div>
        <br>
        <!-- 手机下  col-xs-12 手机的时候将布局 分成 1 份 正好铺满-->
        <div class="row">
            <div class="col-xs-12">
                col-xs-12 手机的时候将布局 分成 1 份 正好铺满
            </div>
            <div class="col-xs-12">
                栅格布局
            </div>
            <div class="col-xs-12">
                栅格布局
            </div>
            <div class="col-xs-12">
                栅格布局
            </div>
        </div>

        <!-- 证明：大屏下   如果份数相加小于12份呢 -->
        <br>
        <div class="row">
            <div class="col-lg-6">
                证明：大屏下 如果份数相加小于12份呢，会保留那一份
            </div>
            <div class="col-lg-2">
                栅格布局
            </div>
            <div class="col-lg-2">
                栅格布局
            </div>
            <div class="col-lg-1">
                栅格布局
            </div>
        </div>
        <br>
        <!-- 证明：大屏下  如果份数相加大于12份呢，则会进行换行 -->
        <div class="row">
            <div class="col-lg-6">
                证明：大屏下 如果份数相加大于12份呢，则会进行换行
            </div>
            <div class="col-lg-2">
                栅格布局
            </div>
            <div class="col-lg-2">
                栅格布局
            </div>
            <div class="col-lg-3">
                栅格布局
            </div>
        </div>

        <br>
        <!-- 列嵌套盒子 -->
        <div class="row">
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-lg-6">1</div>
                    <div class="col-lg-6">2</div>
                    <div class="col-lg-6">3</div>
                    <div class="col-lg-6">4</div>
                </div>
            </div>
            <div class="col-lg-4">列嵌套盒子</div>
            <div class="col-lg-4">3</div>
        </div>

        <!-- 盒子偏移 -->
        <br>
        <div class="row">
            <div class="col-lg-4">偏移的份数 12 - 4+4</div>
            <div class="col-lg-4 col-md-offset-4">右侧偏移 col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">左偏移 col-md-offset-2</div>
        </div>
        <!-- 盒子交换位置 -->
        <br>


        <!-- 盒子的交换位置 -->
        <div class="row">
            <div class="col-lg-4 col-lg-push-8">col-lg-push-8 向右</div>
            <div class="col-lg-8 col-lg-pull-4">col-lg-pull-4 向左</div>
        </div>

        <br>
        <!-- 响应式工具在不同的情况进行隐藏 -->

        <div class="row">
            <div style="background-color: rgb(95, 202, 148);" class="col-lg-3 hidden-lg">大屏幕下我会隐藏哦</div>
            <div style="background-color: rgb(171, 92, 224);" class="col-lg-3 hidden-xs">超小屏幕下我会隐藏哦</div>
            <div style="background-color: rgb(231, 114, 94);" class="col-lg-3 hidden-sm">小屏幕下我会隐藏哦</div>
            <div style="background-color: rgb(59, 137, 182);" class="col-lg-3 hidden-md">中屏幕下我会隐藏哦</div>
        </div>


    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>

</html>

bootstrap 的响应式工具，不得尺寸进行隐藏

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
相反也有我们的 visible-xs，-sm，-md，-lg 指定的尺寸下会显示哦

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

实战练习跟着上面的笔记练习一下吧

效果在这里看：Document

网页的源代码

克隆： git colone https://gitee.com/szhihao/responsive-web-page.git
地址是： https://gitee.com/szhihao/responsive-web-page

总结

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。

响应式设计与自适应设计的区别：响应式开发一套界面，

通过检测视口分辨率，针对不同客户端在客户端做代码处理，

来展现不同的布局和内容；自适应需要开发多套界面，

通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，

从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，

当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

前端因不会响应式而毕业了？怎么将页面变得像路飞一样，一套代码兼容多个终端。

什么是响应式呢？

响应式的布局尺寸

响应式常用的属性

css3 media 的媒体查询

Bootstrap 响应式框架

bootstrap 的响应式工具，不得尺寸进行隐藏

实战练习跟着上面的笔记练习一下吧

网页的源代码

总结

猜你喜欢