前端开发必须要掌握的的响应式布局方式

最新推荐文章于 2024-05-17 17:39:44 发布

前端-阿辉

最新推荐文章于 2024-05-17 17:39:44 发布

阅读量1.1k

点赞数 1

分类专栏：前端布局文章标签： html5 css3

本文链接：https://blog.csdn.net/bigpatten/article/details/104296754

版权

前端布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 响应式开发原理

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

设备	尺寸区间
超小屏幕（手机）	< 768px
小屏设备（平板）	>= 768px ~ < 992px
中等屏幕（桌面显示器）	>= 992px ~ < 1200px
宽屏设备（大桌面显示器）	>= 1200px

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

设备	尺寸区间	父容器宽度
超小屏幕（手机）	< 768px	100%
小屏设备（平板）	>= 768px ~ < 992px	750px
中等屏幕（桌面显示器）	>= 992px ~ < 1200px	970px
宽屏设备（大桌面显示器）	>= 1200px	1170px

以上只是常用的一个方案，我们也可以根据实际情况自己定义划分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }
        /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
        
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }
        /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
        
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }
        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
        
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
</body>
</html>

1.3 制作响应式折叠导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>
<body>
    <nav class="nav">
        <ul>
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">前端工程师</a></li>
            <li><a href="#">服务端工程师</a></li>
            <li><a href="#">UI设计师</a></li>
            <li><a href="#">切图仔</a></li>
        </ul>
    </nav>
</body>
</html>

/* index.css */
.nav {
    position: relative;
    margin: 20px 0;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}
.nav .current a {
    background: #999;
    color: #fff;
    border-radius: 5px;
}

前面的代码，一切都很正常，接下来，我们使用媒体查询，在屏幕宽度小于600px的时候，把nav元素设置成相对定位，就能对ul元素进行绝对定位了。通过display:none，我隐藏了所有的li元素，但保持当前的li元素以块元素显示。然后，当鼠标悬浮于nav元素时，将所有li添加display:block。

/* 屏幕小于600px的时候 */
@media screen and (max-width: 600px) {
    .nav {
        position: relative;
        min-height: 40px;
    }    
    .nav ul {
        /* 给定固定宽度 */
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: #fff url(./icon-menu.png) no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .nav li {
        display: none; /* 隐藏所有的li */
        margin: 0;
    }
    .nav .current {
        display: block; /* 显示当前的li */
    }
    .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
    }
    .nav .current a {
        background: none;
        color: #666;
    }

    /* 当鼠标放到.nav ul 上的时候 */
    .nav ul:hover {
        background-image: none;
    }
    .nav ul:hover li {
        /* 显示所有 */
        display: block;
        margin: 0 0 5px;
    }
    .nav ul:hover .current {
        background: url(./icon-check.png) no-repeat 10px 7px;
    }

其实可以简单的认为，针对不同的屏幕宽度分别编写了一套不同的样式。

html代码的结构不变，改变的是不同屏幕下的这些html的样式。

2 bootstrap的介绍

2.1Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架之一。Bootstrap 是基于HTML、CSS 和 JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。中文网官网。

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

2.2 bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

2.3 版本简介

2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。

3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。

4.x.x：最新版，目前还不是很特别流行

2.4 bootstrap基本使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。

Bootstrap 使用四步曲：

创建文件夹结构

创建 html 骨架结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
 		<!-- 表示当前网页使用ie浏览器的最高版本内核（edge的内核）来渲染 -->   
    <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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 当IE浏览器版本小于9的时候的解决方案，分别是为了解决html5新增标签不识别和css3媒体查询不识别的问题 -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

书写内容

直接拿Bootstrap 预先定义好的样式来使用，也就是会“复制”和“粘贴”。在无法满足我们实际需要的时候，我们可以增加自己的样式，用来覆盖或者增加Bootstrap 原来的样式，注意权重问题即可。

学好Bootstrap 的关键在于：知道它定义了哪些样式，以及这些样式能实现什么样的效果，其实就是知道怎么用即可。

2.5 bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。

.container

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

2.6 bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，它将.container盒子平均分成12等列，由于容器盒子的宽度不同，那么不同的宽度下，每一列的宽度也是有变化的。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。以下是官网简介：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

<!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">
    <title>Bootstrap 101 Template</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
		<!-- 有一个大的容器 -->
    <div class="container">
      	<!-- 规定在一行上 -->
        <div class="row">
          	<!-- col-md- 是中等屏幕下的类前缀，因此下面的意思是在中等屏幕下，每个宽度占3个栅格 -->
            <div class="col-md-3">前端工程师</div>
            <div class="col-md-3">服务端工程师</div>
            <div class="col-md-3">UI设计师</div>
            <div class="col-md-3">产品经理</div>
        </div>
      	<div class="row">
          	<!-- 在中等屏幕下，宽度分别占5、3、2、2个栅格 -->
          	<!-- 在小屏幕下，宽度分别占3、3、3、3个栅格 -->
            <div class="col-sm-3 col-md-5">前端工程师</div>
            <div class="col-sm-3 col-md-3">服务端工程师</div>
            <div class="col-sm-3 col-md-2">UI设计师</div>
            <div class="col-sm-3 col-md-2">产品经理</div>
        </div>
        <div class="row">
            <!-- 如果所有的列加起来不够12份，则占不满，会有空白 -->
            <div class="col-md-5">前端工程师</div>
            <div class="col-md-3">服务端工程师</div>
            <div class="col-md-2">UI设计师</div>
            <div class="col-md-1">产品经理</div>
      </div>
      <div class="row">
            <!-- 如果所有的列加起来超过12份，超出部分会另起一行 -->
            <div class="col-md-5">前端工程师</div>
            <div class="col-md-3">服务端工程师</div>
            <div class="col-md-3">UI设计师</div>
            <div class="col-md-3">产品经理</div>
      </div>
    </div>
    
  </body>
</html>

更多说明：

行（row）可以去除父容器作用15px的边距
xs- extra small：超小； sm- small：小； md- medium：中等； lg- large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=“col-md-4 col-sm-6”

2.6.1 栅格嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列（12列）。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。

<!-- 列嵌套 -->
 <div class="row">
     <div class="col-sm-4">
         <div class="row">
             <div class="col-sm-6">小列</div>
             <div class="col-sm-6">小列</div>
         </div>
     </div>
     <div class="col-sm-4">大列</div>
     <div class="col-sm-4">大列</div>        
</div>

2.6.2 列偏移

使用 .col-sm-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

 <!-- 列偏移 -->
<div class="row">
    <div class="col-sm-4">前端工程师</div>
    <div class="col-sm-4 col-sm-offset-4">服务端工程师</div>     
</div>

2.6.3 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

 <!-- 列排序 -->
  <div class="row">
      <div class="col-md-4 col-md-push-8">左侧</div>
      <div class="col-md-8 col-md-pull-4">右侧</div>
  </div>

2.6.4 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
在这里插入图片描述

<div class="row">
    <!-- 中等屏幕下正常显示，到了小屏幕的时候，UI设计会被隐藏掉 -->
    <div class="col-md-3 col-sm-4">前端</div>
    <div class="col-md-3 col-sm-4">服务端</div>
    <div class="col-md-3 col-sm-4 hidden-sm">UI设计</div>
    <div class="col-md-3 col-sm-4">产品经理</div>
</div>

附：

container宽度修改：

有些时候，我们的设计稿宽度和Bootstrap的宽度分割的并不一样，因此我们要对应的去修改，一般比较简单：

 /* 利用媒体查询修改 container宽度适合效果图宽度， 比如这里1280px的处理，其它的根据情况自行修改  */
  @media (min-width: 1280px) { 
    .container { 
				width: 1280px; 
     } 
   }

前端-阿辉

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端开发必须要掌握的的响应式布局方式

1. 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：设备尺寸区间超小屏幕（手机）< 768px小屏设备（平板）>= 768px ~ < 992px中等屏幕（桌面显示器）>= 992px ~ < 1200px宽屏设备（大桌面显示器）...
复制链接

扫一扫