首页 💂H5-css3,📱移动端

响应式

什么是响应式布局

响应式布局(respond layout)是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端(手机、平板、pc电脑) ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

优点:

一套代码可以适配多个终端

缺点:

1. 需要兼容多个终端 开发效率低
2. 有很多处理兼容的代码 代码冗余较大 加载速度慢

响应式开发现状:

1. 不是所有的网站都适合响应式  基本上是一些简约式的网站适合
2. 如果公司里面已经有了PC网页 那么直接开发手机端就可以
3. 如果是一个新建站点, 并且这个网站比较简约 可以采用响应式来写
4. 国内的响应式网站很少, 国外较多

响应式开发与移动web开发的比较

开发方式移动web开发+pc开发响应式开发
引用场景一般已经有了PC端网站,只需要端独开发移动端网站即可针对一些新建网站,并且要求适配移动端
开发针对性强,开发效率高兼容各种终端,效率低
适配只能适配移动端或者PC端可以适配各种终端
效率代码简洁,加载快代码相对复杂,加载慢
// 思考:响应式开发的原理是什么?

设备分类

分类宽度范围
大屏设备>1200px
中屏设备992px~1200px
小屏设备768px~992px
超小屏设备< 768px

需求:制作一个响应式版心 (根据屏幕的变化动态发生改变)
    大屏设备(>1200px)   版心:1170px   背景色:红色
    中屏设备(992-1200)  版心:970px    背景色:蓝色
    小屏设备(768-992)   版心:750px    背景色:黄色
    超小屏设备(<768px)  版心:100%     背景色:绿色
.w {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    background-color: lime;
}

/* 覆盖式的写法 */
@media screen and (min-width: 768px) {
    .w {
        width: 750px;
        height: 200px;
        margin: 0 auto;
        background-color: yellow;
    }
}

@media screen and (min-width: 992px) {
    .w {
        width: 970px;
        height: 200px;
        margin: 0 auto;
        background-color: blue;
    }
}

@media screen and (min-width: 1200px) {
    .w {
        width: 1170px;
        height: 200px;
        margin: 0 auto;
        background-color: red;
    }
}

bootstrap框架

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

bootstrap中文网

特点:

  • 组件简洁大方、代码规范精简、界面自定义性强。
  • Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。
  • Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站(后台管理系统)。

优点:

  • 有自己的生态圈,不断的更新迭代
  • 提供了一套简洁、直观、强悍的组件
  • 标准化的HTML+CSS编码规范
  • 让开发更简单,提高了开发效率。
  • 扩展性强,虽然界面组件样式已经定义好了,我们还可以自定义,修改默认样式。

版本:

  • 2.x.x 停止维护

    • 优点:兼容性好
    • 缺点:代码不够简洁、功能不够完善
  • 3.x.x 目前使用最多

    • 优点:稳定,偏向于开发响应式布局,移动设备优先的WEB项目
    • 缺点:放弃了IE67,对IE8支持但是界面效果不友好
  • 4.x.x 阶段

全局样式

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
  ...
</div>

这两种 容器类不能互相嵌套。

栅格系统

栅格系统,也叫网格系统

  • .row用于抵消.container容器的15px的padding值
  • 可以在.row中嵌套column

栅格系统常用类(总共12列)

类名例子解释
.col-xs-xx.col-xs-6在超小屏幕(及以上)生效
.col-sm-xx.col-sm-6在小屏幕(及以上)生效
.col-md-xx.col-md-6在中屏幕(及以上)生效
.col-lg-xx.col-lg-3在大屏幕及生效,占1/4
.col-lg-xx.col-lg-4在大屏幕及生效,占1/3
.col-lg-xx.col-lg-5在大屏幕及生效,占1/2

【案例:响应式栅格系统】

<!--
需求:
  1. 在大屏时显示6个等分的列
  2. 在中屏时显示4个等分的列
  3. 在小屏时显示3个等分的列
  4. 在超小屏时显示2个等分的列
-->

【案例:列嵌套.html】

<div class="col-lg-4">
      <!--栅格系统无处不在,只要父盒子有宽度,就可以使用栅格系统-->
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>

响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示

推荐使用hidden相关的属性

腾讯响应式网站案例

搭建了项目的结构

image-20210327111412237

  • 首页基础架子
<!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, user-scalable=no">
  <title>腾讯-响应式</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  
</body>
</html>

轮播图功能

  • 基本结构
<div class="banner">
  <ul>
    <li><a href="#"><img src="./uploads/banner_1.jpg" alt=""></a></li>
  </ul>
  <div class="header">
    <div class="container">

    </div>
  </div>
</div>
  • 样式
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.banner {
  position: relative;
  img {
    width: 100%;
  }
  .header {
    position: absolute;
    top: 0;
    width: 100%;
    .container {
      height: 60px;
      background-color: purple;
    }
  }
}

头部链接处理

<div class="container">
  <div class="col-lg-6 left">
    <img src="./images/logo.png" alt="">
  </div>
  <div class="col-lg-6 right">
    <ul>
      <!-- shift + 右箭头: 选中 -->
      <!-- fn + 右箭头(end) 跳转到最后 -->
      <li><a href="#">首页</a></li>
      <li><a href="#">博客</a></li>
      <li><a href="#">Github</a></li>
      <li><a href="#">TWeb Conf</a></li>
      <li><a href="#">SuperStar</a></li>
      <li><a href="#">Web前端导航</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </div>
</div>
  • 样式

.banner {
  position: relative;
  img {
    width: 100%;
  }
  .header {
    position: absolute;
    // background-color: pink;
    top: 0;
    width: 100%;
    .container {
      height: 60px;
      // background-color: purple;
    }
    .left {
      img {
        width: 200px;
        height: 40px;
        margin-top: 10px;
      }
    }
    .right {
      li {
        float: left;
        height: 60px;
        line-height: 60px;
        margin-right: 20px;
        a {
          color: #fff;
          font-size: 16px;
        }
      }
    }
    
  }
}


文章评论

目录