前端响应式布局

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量653 收藏 1
点赞数
分类专栏： 响应式布局 文章标签： 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51449345/article/details/109567873
版权

响应式布局

响应原理

介绍

  • 响应式布局通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕
  • 位置：手机端(单独制作)；<-----响应式（三端）----->PC(单独制作)
  • 响应布局的原理：媒体查询+百分比布局（浮动）；rem布局也有媒体查询（设置HTML 字体大小 1rem=多少px），但是rem布局更侧重于等比变化；

档位划分

  • 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位
    • w<768 超小屏幕（xs : extra small）（手机，学习rem布局里面的档位划分都是在这个范围）
    • 768<= w <992 小屏设备（sm : small）（平板）
    • 992<= w <1200 中等屏幕（md: medium）（桌面显示器）
    • 1200<=w 大宽屏设备（lg: large）（大桌面显示器）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rX136f52-1604852905002)(./images/001.png)]

  • 语法：把市场上所有屏幕包括在内；
/* 1. 超小屏幕下 xs  小于 768  布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
}

/* 2. 小屏幕下 sm  大于等于768  布局容器改为 750px */
@media screen and (min-width: 768px) {
}

/* 3. 中等屏幕下 md 大于等于 992px   布局容器修改为 970px */
@media screen and (min-width: 992px) {
}

/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
}

版心

  • 不同的档位下，版心不同；
  • 档位设置：版心；
  • 所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需求；
  • 语法：
/* 1. 超小屏幕下 xs  小于 768  布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/* 2. 小屏幕下 sm  大于等于768  布局容器改为 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 3. 中等屏幕下 md 大于等于 992px   布局容器修改为 970px */
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
  • 注意：
    • 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px；
    • 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px；原因：两边留空白，用户体验好。
    • 以上市场默认划分，可根据自己需求添加档位；

布局

  • 不同的档位下，布局不同；
/* md 中屏以上 */
@media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
      [class*="col-md-1"] {
        width: 8.333333%;
      }
      [class*="col-md-2"] {
        width: 16.666666%;
      }
      [class*="col-md-3"] {
        width: 25%;
      }
      [class*="col-md-4"] {
        width: 33.3333333%;
      }
      [class*="col-md-5"] {
        width: 41.6666666666%;
      }
      [class*="col-md-6"] {
        width: 50%;
      }
      [class*="col-md-7"] {
        width: 58.33333333333%;
      }
      [class*="col-md-8"] {
        width: 66.66666666666%;
      }
      [class*="col-md-9"] {
        width: 75%;
      }
      [class*="col-md-10"] {
        width: 83.33333333%;
      }
      [class*="col-md-11"] {
        width: 91.66666666%;
      }
      [class*="col-md-12"] {
        width: 100%;
      }
    }
  • 多个使用类前缀会单独生效？多个使用，意味着有多个档位，若当前屏幕属于某个档位，直接该档位类前缀生效；
// md档位
@media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
      [class*="col-md-1"] {
        width: 8.333333%;
      }
}

// lg 档位
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
    [class*="col-lg-1"] {
        width: 8.333333%;
    }
}
  • 原理：媒体查询，内部设置不同的版心和类名；

bootstrap

  • 利用 框架 bootstrap 可非常快地搭建出响应式页面；

重点

  • 栅格系统
  • 响应式工具

介绍

  • Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端响应式框架。墙掉；

  • 网址：

    • 中文网：http://www.bootcss.com/
    • 官网：http://getbootstrap.com/
    • 推荐：http://bootstrap.css88.com/

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

  • 版本：

    • 2.x.x：停止维护，代码不够简洁，功能不够完善。
    • 3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB 项目。【!】
    • 4.x.x：最新版，目前还不是很流行

使用初始化

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

  • Bootstrap 目录初始化：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kPr7OuaT-1604852905004)(./images/1.png)]

  • index.html 初始化：
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <title>Bootstrap Template</title>

    <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
    <!-- 条件注释:小于IE9的版本 -->
    <!--[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>
  </body>
</html>

布局容器

  • 版心设置：Bootstrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。
  • .container：设置不同档位下的版心的宽度；
    • 超小屏（xs : extra small）：手机； 0px <=w ；版心宽度为100%
    • 小屏（sm : small） ：平板； 768px<=w ；版心宽度定为 750px
    • 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px
    • 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px
  • .container-fluid：百分百宽度；
  • 特点：
    • 所有元素为CSS3盒子模型；
    • 布局盒子有左右15pxpadding值；

预制类名

  • 排版
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p>...</p>
  • 按钮：
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
  • 辅助类样式：
<!-- 上下文颜色 -->
<p class="text-muted">...</p>

<!-- 下拉三角 -->
<span class="caret"></span>
  • 字体图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  • 使用：
    • 拿来即用，开袋即食；
    • 修改样式：重新设置类名，注意权重问题；

栅格系统

  • 作用：设置子元素在不同档位下的布局；

介绍

  • 栅格系统，在各个档位下，控制子元素布局不同；将版心宽度均分为12份；
  • 各个档位下都有预制好的类前缀：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffOYS1JL-1604852905006)(./images/007.png)]

  • 类前缀：
    • 超小屏（xs : extra small）：手机；
    • 小屏（sm : small） ：平板；
    • 中屏（md: medium）：桌面；
    • 大屏（lg: large）：大桌面；
  • 栅格系统用于通过一系列的**行（row）与列（column）**的组合来创建页面布局，你的内容就可以放入这些创建好的布局中，控制不同的档位下，列的子元素占有几份

基本使用

  • 语法：
<!-- 中屏和以上占有6份 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
  	<div class="col-md-6">.col-md-6</div>
  </div>
</div>

<!-- 各个档位下，按照各个档位下布局 -->
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">1</div>
  	<div class="col-md-6 col-lg-8">2</div>
  </div>
</div>
  • 特点：
    • 单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份；
    • 多个类前缀：分别按照各个档位列划分生效；
    • 每个子项：默认左右15px的padding；
    • 行（.row） 可以去除父容器左右15px的padding值：.row的左右margin为-15px；

列嵌套

  • 操作：可以在已经分好的子元素中内部，继续进行列的划分（共12份）；.
  • 效果：继续在分好的布局内继续划分；
  • 语法：
<!-- 直接嵌套 -->
<div class="col-sm-4">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
</div>

<!-- 使用row嵌套 -->
<div class="col-sm-4">
    <!-- 加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高； -->
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移

  • 操作：是划分好的子项进行列的份数偏移
  • 场景：左右布局，居中布局；
  • 语法：
<!-- 左右对齐-->
<div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 12-4-4  -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

<!-- 居中-->
<div class="row">
     <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
     <div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>

列排序（了解）

  • 操作：划分份数的子项，按照列的份数进行排序；
  • 效果：左右布局改变顺序，不常用；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OL5FeWQD-1604852905009)(./images/009.png)]

  • 语法：
<!-- 列排序 -->
<div class="row">
    <div class="col-md-4 col-lg-4 col-lg-push-8"></div>
    <div class="col-md-8 col-lg-8 col-lg-pull-4"></div>
</div>

响应式工具

  • 预制类

  • 可以控制子元素在档位下进行显示或隐藏；

  • 语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bA4RYtvJ-1604852905012)(./images/010.png)]

  • 注意：和列类前缀的参数形成对比记忆，
    • col-sm-* 是超小屏（包含）以上的屏幕都是这个份数的划分；
    • 响应式工具 只是对当前档位下的类前缀类名生效；
Mr.Ma98
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端响应式布局笔记-媒体查询
06-05
总结，媒体查询是前端响应式布局的重要组成部分，它允许我们根据设备特性和用户环境定制界面样式。熟练掌握媒体查询的使用，有助于创建更优质、更具适应性的网页应用。在实际项目中，结合其他CSS技术，如Flexbox和...
基于layui框架响应式布局的一些使用详解
10-16
layui是一款轻量级的前端UI框架，它提供了丰富的组件和优雅的样式，尤其在响应式布局方面表现突出。本文将深入探讨如何使用layui实现响应式布局，帮助开发者快速构建适应不同设备的网页。 ### 一、layui响应式布局...
前端响应式布局方式及其优缺点大全
qq_39454432的博客
04-12 1130
前端响应式布局方式及其优缺点大全
实现响应式布局的多种方法
(黎子)人生编码
06-13 1422
响应式网页设计（Responsive Web Design, RWD）已成为现代网站开发的标准做法。它确保网页在不同设备和屏幕尺寸上都能提供优秀的用户体验。实现响应式布局有多种方法，每种方法都有其特点和用途。本文将探讨几种主要的实现响应式布局的方法。
前端响应式布局详解
weixin_46663768的博客
05-01 1093
前端响应式布局原理与方案（详细版） 引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。 响应式设计...
实现前端响应式布局
weixin_44823731的博客
08-25 1261
实现前端响应式的布局的方法有很多种，下面我介绍的是使用rem跟vw/vh这两种方法来实现响应式页面。 1.使用rem来实现响应式布局 rem：是一个相对根元素字体大小的单位。总的来说就是一个相对单位。看到rem这个单位，很多人就会想起em这个单位，em也是属于相对单位，但是他是相对于父元素字体大小的单位。 根元素是html，不是body。 使用方式： html { font-size: 100px; } p { font-size: 0.16rem; } div { width: 2rem; }
前端—响应式布局
sinat_61654365的博客
03-17 602
媒体查询（Media Queries）是一种 CSS 技术，可以根据设备的属性或特征来应用不同的样式规则。使用媒体查询可以根据设备的屏幕宽度、高度、方向、分辨率、颜色等属性，为不同的设备提供不同的样式。媒体查询通常用于响应式设计，使得网页能够根据不同的设备和屏幕尺寸来自适应，提供最佳的浏览体验。例如，当用户使用手机浏览网页时，可以通过媒体查询来调整网页的布局、字体大小、图像大小等，以适应手机的小屏幕。
前端响应式布局原理与方案
weixin_58016047的博客
10-09 436
前端响应式布局原理与方案 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。 响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 响应式布局的实现方案： 1. 媒体查询 CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
前端响应式布局原理与实践
qq_42002487的博客
03-06 895
前言 作为一个前端开发者，响应式网站开发是必备技能之一。响应式有它的很好的优点，也有它一定的缺点。这就需要我们在开发的时候做出取舍。对于内容较少、主要为展示类网站，故采用响应式；对于内容多，管理类的网站采用分开开发的方式，不同设备采用不同的一套代码。本文会主要探讨响应式布局原理和技巧，并结合实例来加深印象。 响应式与自适应 我们很多人其实把这响应式和自适应两种网站当成一回事，但事实上这两种网站的布...
前端响应式布局Layout推荐(带案例)
m0_49714202的博客
07-20 544
前端响应式布局Layout推荐(带案例)
前端响应式布局原理与方案（详细版）
热门推荐
大灰狼的小绵羊哥哥的博客
04-08 5万+
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。 响应式设计与自适应设计的区别：响应式开发...
Vue 项目前端响应式布局及框架搭建
李长渊的博客
05-21 2997
Vue 项目前端响应式布局及框架搭建
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
前端validate校验和响应式布局
11-27
在前端开发中，验证（validate）是确保用户输入的数据符合预期格式和规则的重要步骤，而响应式布局则是使网站能够适应不同设备屏幕尺寸的关键技术。本资源提供的"day05_validate"压缩包文件，很可能是关于这两方面...
响应式布局学习资料(web前端适应多屏幕尺寸技术)
09-07
响应式布局是现代Web开发中的关键技术，它使得网站可以适应各种屏幕尺寸，包括电脑、平板、手机等不同设备。这种技术的核心在于利用CSS3的Media Queries、Flexbox或Grid布局来实现页面元素的灵活调整，确保在任何...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 804
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 371
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 994
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
帮我写一段前端响应式布局的代码
09-02
### 回答1： <div style="width: 100%; overflow: hidden;"> <div style="width: 50%; float: left;"> <div style="width: 100%; height: 20px; background-color: #e6e6e6;"></div> <div style="width: 100%; height: 20px; background-color: #f2f2f2;"></div> <div style="width: 100%; height: 20px; background-color: #e6e6e6;"></div> </div> <div style="width: 50%; float: left;"> <div style="width: 100%; height: 20px; background-color: #f2f2f2;"></div> <div style="width: 100%; height: 20px; background-color: #e6e6e6;"></div> <div style="width: 100%; height: 20px; background-color: #f2f2f2;"></div> </div> </div> ### 回答2： 当然，我可以帮你写一段前端响应式布局的代码。 首先，我们需要使用HTML和CSS来实现这个布局。以下是一段简单的代码示例，展示了如何创建一个响应式的布局： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-wrap: wrap; } .item { width: 100%; padding: 20px; box-sizing: border-box; } @media screen and (min-width: 600px) { .item { width: 50%; } } @media screen and (min-width: 900px) { .item { width: 33.33%; } } </style> </head> <body> <div class="container"> <div class="item" style="background-color: #F44336;">Item 1</div> <div class="item" style="background-color: #E91E63;">Item 2</div> <div class="item" style="background-color: #9C27B0;">Item 3</div> <div class="item" style="background-color: #673AB7;">Item 4</div> <div class="item" style="background-color: #3F51B5;">Item 5</div> <div class="item" style="background-color: #2196F3;">Item 6</div> <div class="item" style="background-color: #4CAF50;">Item 7</div> <div class="item" style="background-color: #FF9800;">Item 8</div> <div class="item" style="background-color: #795548;">Item 9</div> </div> </body> </html> ``` 在这个示例中，我们使用了Flexbox来创建布局。`.container`类定义了一个Flex容器，`.item`类定义了Flex项（子元素）。在不同的屏幕宽度下，`.item`的宽度会有所调整，从而实现响应式布局。 通过`@media`查询，我们可以在特定的屏幕宽度下设置不同的样式。在示例中，当屏幕宽度大于等于600像素时，每个`.item`的宽度为50%；当屏幕宽度大于等于900像素时，每个`.item`的宽度为33.33%。 你可以根据需要修改`.item`的样式和媒体查询的条件来适应你的具体需求。希望这段代码能够对你有帮助！ ### 回答3： 前端响应式布局是指根据设备的屏幕大小和分辨率自动调整网页布局，使得网页能够在不同的设备上呈现出最佳效果。下面是一个简单的前端响应式布局代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 300px; margin-bottom: 20px; background-color: lightblue; padding: 20px; } @media (max-width: 768px) { .item { width: 100%; } } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> </body> </html> ``` 在上述代码中，我们使用了Flexbox布局（`.container`），使得四个`.item`元素能够水平排布，并且间距相等。每个`.item`元素的宽度为300px。但是当设备的宽度小于768px时，我们使用了媒体查询（`@media`）来改变`.item`的宽度为100%，使得它们能够自动适应不同设备的屏幕大小。 这段代码是一个简单的响应式布局示例，你可以根据实际需求进行修改和扩展，以适应你的项目需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值