十六、响应式布局的概念、响应式布局的概念、通过媒体查询来适配样式、百分比布局、响应式图片的处理、响应式的优缺点

本文链接：https://blog.csdn.net/qq_52426181/article/details/110959424

一、响应式布局的概念

2010年5月提出

二、响应式布局的概念

1、标签设置

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- 如果可能，调用 chome 内核，或者高版本的 IE 内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 兼容不支持 viewport 的设备 -->
<meta name="HandheldFriendly" content="true">

2、媒体查询

回顾媒体查询的语法

@media screen and (min-width:500px) and (max-width:1000px){
    css样式
}

通过媒体查询来适配样式

根据项目需求会进行三到四种屏幕样式的适配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yPnwcbNk-1607598569231)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201209092415868.png)]

（1）大屏优先

先针对大屏幕下来写css样式，然后往小的屏幕下进行适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-indent: 2em;
        }
        /* 针对大屏幕下，文字排成4列，背景颜色yellow */
        .box {
            column-count: 4;
            background-color: yellow;
        }
        /* 中等屏幕下，文字排成3列，背景颜色紫色 */
        @media screen and (max-width:1200px) {
            .box {
                column-count: 3;
                background-color: purple;
            }
        }
        /* 小屏幕下（平板），文字排成2列，背景颜色粉色 */
        @media screen and (max-width:992px) {
            .box {
                column-count: 2;
                background-color: pink;
            }
        }
        /* 超小屏幕下（手机），文字排成1列，背景颜色天蓝色 */
        @media screen and (max-width:768px) {
            .box {
                column-count: 1;
                background-color:skyblue;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <p>中公教育集团创建于1999年，经过十余年潜心发展，中公教育是由一家北大毕业生自主创业的信息技术与教育服务机构，发展为教育服务业的综合性企业集团，成为集合面授教学培训、网校远程教育、图书教材及音像制品的出版发行于一体的大型知识产业实体。中公教育集团是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。 [1]</p>
        <p>2019年11月27日，胡润研究院发布《2019胡润百学·教育企业家榜》显示，中公教育的鲁忠芳、李永新母子以585亿元新上榜成为中国教育领域新首富，其联合创始人王振东以150亿元新上榜进入前五。 [2]</p>
        <p>公司创始人团队于1999年开始创业，2000年进入公务员考试培训行业，每年培训学员超过140万人。 [5]  公司总部位于北京，是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。</p>
        <p>经过十余年潜心发展，中公教育在国内31个省份、300余个地市，拥有300余家直营分校和旗舰学习中心、3000余名专职授课教师、2000余种教辅图书出版物、7000余名员工，成为集合面授教学培训、网校远程教育、图书教材及音像制品的出版发行于一体的大型知识产业实体。</p>
        <p>截至2017年12月31日，公司在全国319个地市建立了582家直营分部和学习中心； [5]  截至2018年4月30日，公司共有员工22620人，其中专职研发人员达1344人。 [6]</p>
        <p>中公教育秉承着“实用、有效、专业、深度”的办学宗旨，依靠顶级的师资阵容和完整的自主研发实力，培训业务涵盖公务员考试、事业单位考试、军转干考试、招警考试、选调生/三支一扶/大学生村官考试、政法干警考试、公开选拔领导干部考试、教师招聘考试等，拥有国内首家公职考试研究院，面向全国培训学员超过1000余万人次，为众多考生实现公职梦想提供了强大的智力支持与服务保障。</p>
        <p>作为职业教育服务业的综合性企业，中公教育针对公众“终身学习”和“素质教育”的需求，在国家专业硕士（MBA/MPA等）招生考试、建筑工程行业执业资格考试、执业医师资格考试、银行/农信社等金融系统入职资格考试、会计从业资格考试等领域，提供全方位的考前培训，并在职业规划、求职就业培训等领域为广大青年人提供深度辅导实现了培训产品的规模化、多元化和差异化，在中国职业教育领域独树一帜。</p>
    </div>
</body>
</html>

（2）移动端优先

先针对小屏幕进行css样式书写，往大的屏幕下进行适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-indent: 2em;
        }
        /* 先针对移动端（手机  0-768px），分1列，文字颜色red */
        .box {
            column-count: 1;
            color: red;
        }
        /* 平板（768-992px），分2列，文字颜色黄色 */
        @media screen and (min-width: 768px) {
            .box {
                column-count: 2;
                color: yellow;
            }
        }
        /* 电脑（992-1200px），分3列，文字颜色灰色 */
        @media screen and (min-width: 992px) {
            .box {
                column-count: 3;
                color: gray;
            }
        }
        /* 大屏电脑（1200px以上），分4列，文字颜色绿色 */
        @media screen and (min-width: 1200px) {
            .box {
                column-count: 4;
                color: green;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <p>中公教育集团创建于1999年，经过十余年潜心发展，中公教育是由一家北大毕业生自主创业的信息技术与教育服务机构，发展为教育服务业的综合性企业集团，成为集合面授教学培训、网校远程教育、图书教材及音像制品的出版发行于一体的大型知识产业实体。中公教育集团是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。 [1]</p>
        <p>2019年11月27日，胡润研究院发布《2019胡润百学·教育企业家榜》显示，中公教育的鲁忠芳、李永新母子以585亿元新上榜成为中国教育领域新首富，其联合创始人王振东以150亿元新上榜进入前五。 [2]</p>
        <p>公司创始人团队于1999年开始创业，2000年进入公务员考试培训行业，每年培训学员超过140万人。 [5]  公司总部位于北京，是国内直营分校覆盖城市广、专职教师数量多、公职类职业培训规模大的现代化职业教育机构。</p>
        <p>经过十余年潜心发展，中公教育在国内31个省份、300余个地市，拥有300余家直营分校和旗舰学习中心、3000余名专职授课教师、2000余种教辅图书出版物、7000余名员工，成为集合面授教学培训、网校远程教育、图书教材及音像制品的出版发行于一体的大型知识产业实体。</p>
        <p>截至2017年12月31日，公司在全国319个地市建立了582家直营分部和学习中心； [5]  截至2018年4月30日，公司共有员工22620人，其中专职研发人员达1344人。 [6]</p>
        <p>中公教育秉承着“实用、有效、专业、深度”的办学宗旨，依靠顶级的师资阵容和完整的自主研发实力，培训业务涵盖公务员考试、事业单位考试、军转干考试、招警考试、选调生/三支一扶/大学生村官考试、政法干警考试、公开选拔领导干部考试、教师招聘考试等，拥有国内首家公职考试研究院，面向全国培训学员超过1000余万人次，为众多考生实现公职梦想提供了强大的智力支持与服务保障。</p>
        <p>作为职业教育服务业的综合性企业，中公教育针对公众“终身学习”和“素质教育”的需求，在国家专业硕士（MBA/MPA等）招生考试、建筑工程行业执业资格考试、执业医师资格考试、银行/农信社等金融系统入职资格考试、会计从业资格考试等领域，提供全方位的考前培训，并在职业规划、求职就业培训等领域为广大青年人提供深度辅导实现了培训产品的规模化、多元化和差异化，在中国职业教育领域独树一帜。</p>
    </div>
</body>
</html>

3、响应式文字处理

rem，css3中的单位，rem是指相对于根元素的font-size来进行计算的单位

p {
    text-indent: 2em;
    font-size: 2rem;
}
  @media screen and (min-width: 992px) {
    html {
        font-size: 12px;
    }
}

4、百分比布局

水平方向上采用百分比单位，例如width、左右padding、左右border、左右margin等水平方向的属性，垂直方向上定值（px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .wrap {
            /* height: 200px; */
            background-color: greenyellow;
        }
        .inner {
            /* 水平方向上全部是百分比，包括父辈元素的水平方向的值都是百分比 */
            /* width: 1200px; */
            width: 90%;
            margin: 0 auto;
        }
        .wrap .box {
            float: left;
            /* width: 300px; */
            width: 24%;
            margin-right: 1%;
            height: 200px;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
        }
        .last {
            margin-right: 0;
        }
        /* 768往下，需要让class名称为box的盒子一行排2个，总共排2行 */
        @media screen and (max-width: 768px) {
            /* .wrap .box {
                width: 48%;
            } */
            .box {
                width: 48% !important;
                background-color: hotpink;
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner clearfix">
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box last">box4</div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            background-color: greenyellow;
        }
        .inner {
            width: 90%;
            margin: 0 auto;

        }
        .wrap .inner {
            display: flex;
            flex-wrap: wrap;
        }
        .wrap .box {
            width: 24%;
            margin-right: 1%;
            height: 200px;
            background-color: yellow;
            text-align: center;
            line-height: 200px;
        }
        .last {
            margin-right: 0;
        }
        /* 适配：.box改变宽度 */
        @media screen and (max-width: 768px) {
            .wrap .box {
                width: 48%;
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner">
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box last">box4</div>
        </div>
    </div>
</body>
</html>

5、响应式图片的处理

（1）前景图

img {
    max-width: 50%;
}

前景图中需要设置图片的宽度或者宽度为百分比

（2）背景图

.box {
    width: 50%;
    height: 300px;
    background: url("./1.jpg") no-repeat;
    background-size: 100%;
}

背景图中需要调整背景图的尺寸

三、响应式的优缺点

笔试题：什么是响应式，响应式的原理及优缺点分析

响应式是指不同屏幕尺寸下，元素的排列方式和显示发生变化

响应式原理：根据不同的屏幕尺寸，对元素的样式进行调整与适配，改变它在不同屏幕下的排列及显示

响应式网站的优点：

减少工作量，网站、设计、代码、内容都只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变
节省时间
每个设备都能得到正确的设计

响应式网站的缺点：

会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器兼容不好