前端响应式布局

最新推荐文章于 2024-06-13 09:59:43 发布
最新推荐文章于 2024-06-13 09:59:43 发布
阅读量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
    评论
专栏目录
响应式布局代码怎么写_响应式布局终结篇 5 种常见布局模式
weixin_39642981的博客
11-29 2237
作者 | Brilliant Open Web团队编辑 |Brilliant Open Web团队本文继续在响应式布局上深入讨论，主要介绍 web 产品中常用的响应式布局的 5 种设计模式，并通过一些简单的代码介绍具体在实际的项目种是如何实现这些设计模式的。对布局模式的认识有助于你在项目实现最佳的响应式体验。本文是响应式布局系列的最后一篇文章，不知道你看到这里有没有对响应式布局有更深的...
前端响应式
weixin_49602426的博客
10-29 1733
总所周知，我们前端也被称为响应式web交互设计，那么什么是响应式呢？响应式：响应不同屏幕设备合适地展现网页效果的方式或着手段。举个栗子来说，就是我要苹果（PC页面）你就给我一个苹果（PC页面），我要梨子（移动端页面）你就不能再把那个苹果（PC页面）给我，而是给个梨子（移动端页面），虽然他们都是水果（页面）。
CSS响应式布局（自适应布局）
weixin_65607135的博客
09-15 1万+
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
响应式布局
xiangxiongfly
04-23 1439
响应式布局是指网站或应用程序可以自适应不同的屏幕尺寸和设备类型，简而言之就是一个网站兼容多种终端。
实现响应式布局的多种方法
最新发布
(黎子)人生编码
06-13 1423
响应式网页设计（Responsive Web Design, RWD）已成为现代网站开发的标准做法。它确保网页在不同设备和屏幕尺寸上都能提供优秀的用户体验。实现响应式布局有多种方法，每种方法都有其特点和用途。本文将探讨几种主要的实现响应式布局的方法。
六个响应式布局案例
m0_58467275的博客
05-15 922
响应式布局案例分析，内含弹性布局使用
前端-关于布局-响应式布局
weixin_44990056的博客
03-08 329
pc端响应式布局 1.element头中尾布局容器+弹性布局 + px 2.百分比布局====大块布局进行百分比设置 3.bootstrap响应式布局 https://jingyan.baidu.com/article/48b37f8de8ef6f1a64648816.html 4.element 响应式布局+百分比或者vw或者rem https://jingyan.baidu.com/artic...
前端响应式布局笔记-媒体查询
06-05
总结，媒体查询是前端响应式布局的重要组成部分，它允许我们根据设备特性和用户环境定制界面样式。熟练掌握媒体查询的使用，有助于创建更优质、更具适应性的网页应用。在实际项目中，结合其他CSS技术，如Flexbox和...
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
基于layui框架响应式布局的一些使用详解
10-16
layui是一款轻量级的前端UI框架，它提供了丰富的组件和优雅的样式，尤其在响应式布局方面表现突出。本文将深入探讨如何使用layui实现响应式布局，帮助开发者快速构建适应不同设备的网页。 ### 一、layui响应式布局...
前端validate校验和响应式布局
11-27
在前端开发中，验证（validate）是确保用户输入的数据符合预期格式和规则的重要步骤，而响应式布局则是使网站能够适应不同设备屏幕尺寸的关键技术。本资源提供的"day05_validate"压缩包文件，很可能是关于这两方面...
响应式布局学习资料(web前端适应多屏幕尺寸技术)
09-07
响应式布局是现代Web开发中的关键技术，它使得网站可以适应各种屏幕尺寸，包括电脑、平板、手机等不同设备。这种技术的核心在于利用CSS3的Media Queries、Flexbox或Grid布局来实现页面元素的灵活调整，确保在任何...
APP前端响应式页面
04-03
在“蓝莓小镇APP前端响应式页面”项目中，我们关注的是如何为移动应用（APP）构建一个既能适应手机小屏幕，又能适应平板电脑或桌面大屏幕的前端界面。这个项目的目标是创建一个简单且实用的用户界面，让用户无论在何...
响应式布局大全代码
07-03
响应式布局是现代网页设计的关键技术之一，它允许网页在不同设备上自适应显示，无论是桌面电脑、平板电脑还是智能手机，都能提供良好的用户体验。在这个"响应式布局大全代码"压缩包中，我们可以期待找到一系列使用...
前端响应式网站开发模板
07-07
在"前端响应式网站开发模板"中，我们可以看到一些关键的技术和概念被应用，这些包括： 1. **REM单位**：REM（Root EM）是以根元素（通常是html元素）的字体大小为基准的长度单位。在响应式设计中，使用REM可以使...
html5&css&js代码 024 响应式布局示例
明月看潮生的博客
03-19 925
该HTML代码重点在于构建一个带有响应式设计的两栏布局网页，包含页头、导航条、主要内容区（左右两列）和底部区域，并运用CSS样式设置页面元素的布局、颜色、字体、间距等视觉表现，确保在不同屏幕尺寸下网页布局能灵活调整。
在html中写响应式布局的代码,CSS实现响应式布局的方法
weixin_33484163的博客
05-31 2978
用CSS实现响应式布局响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询，下面就介绍一下怎么运用：使用@media 的三种方法1.直接在CSS文件中使用：@media 类型 and (条件1) and (条件二){css样式}@media screen and (max-width:1024px) {body{background-color: red;...
响应式布局的实现方式（5种）
热门推荐
m0_66051368的博客
04-12 3万+
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1、百分比布局 百分比是相对于 包含块 的计量单位，通过对属性设置百分比来适应不同的屏幕 包含块： 1. 有父元素相对于父元素 2. 无父元素相对于视口 3. 或者继承于父元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta...
帮我写一段前端响应式布局的代码
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、付费专栏及课程。

余额充值