移动Web开发 响应式布局

最新推荐文章于 2021-08-25 10:40:09 发布
最新推荐文章于 2021-08-25 10:40:09 发布
阅读量152 收藏
点赞数 1
分类专栏： 基础学习 文章标签： css css3 html5 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53283188/article/details/114761475
版权
本文介绍了响应式开发的基本原理，通过媒体查询实现不同设备的布局适配。详细探讨了Bootstrap框架，包括布局容器的尺寸设定以及栅格系统的应用，指导如何创建文件结构，配置HTML骨架，引入样式文件，以及利用.container和.container-fluid类实现固定宽度和流式布局。
摘要由CSDN通过智能技术生成

一、响应式开发原理

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

响应式布局容器

  • 超小屏幕（手机，小于 768px）：设置宽度为 100%
  • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
  • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
  • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

二、bootstrap


1.创建文件夹结构
在这里插入图片描述
2.创建 html 骨架结构
3.引入bootstrap样式文件

<link rel="
最低0.47元/天 解锁文章
鲸渔要加油
关注
专栏目录
简要了解jQuery移动web开发的响应式布局设计
11-24
响应式布局设计是现代Web开发的关键技术之一，它允许网页根据用户所使用的设备屏幕尺寸自动调整布局，确保在任何设备上都能提供良好的用户体验。在jQuery Mobile框架中，开发者可以利用CSS3媒体查询来实现响应式设计...
学习Bootstrap 5的第二天
最新发布
m0_74293254的博客
09-02 458
如果想要在更小的设备上实现类似的效果，可以将 .col-md-* 类改为 .col-* 类，或者使用响应式类 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分别对应小、中、大和超大型设备。如果想要在更小的设备上实现类似的效果，可以将 .col-lg-* 类改为 .col-* 类，或者使用响应式类 .col-{breakpoint}-*，其中 {breakpoint} 可以是 sm、md、lg 或 xl，分别对应小、中、大和超大型设备。
移动端自适应布局和响应式页面兼容移动端布局
X-77
08-25 2821
上篇博客讲到了移动端的常用布局模式之一：Flex布局，这篇博客咱们来了解一下移动端的另外两种布局——移动端自适应布局和响应式页面兼容移动端布局。 一、移动端自适应布局 所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。 1.rem 什么是rem rem和我们之前学过的em一样，都是css...
移动web开发实例flex布局案例源码
02-16
本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础： Flex布局允许开发者轻松地调整元素的大小和位置，以适应不同屏幕尺寸和设备...
移动web开发-rem布局案例源码，html+css素材
02-16
在移动Web开发中，REM（Root EM）布局是一种常见的响应式设计策略，它允许开发者以相对于根元素（通常是html元素）的字体大小来设置元素的尺寸。这种布局方式能够确保在不同屏幕尺寸和设备上提供一致的视觉体验，...
CSS实现响应式布局的方法
09-22
响应式布局是Web开发中的一个重要概念，它确保网页能够根据不同的屏幕尺寸和分辨率，为用户提供一致的浏览体验。响应式设计让网页能够在不同设备（如电脑、平板和手机）上自动调整布局，从而无需为不同设备创建多个...
Vue 接口 promise + fetch + axios + async 和 await
qq_53283188的博客
06-05 3782
文章目录一、promise1. 异步2. Promise 一、promise 1. 异步 JS 是但线程，一次只能执行一个任务，任务执行完后才能执行下一个，它会「阻塞」其他任务，这个任务可称为主线程 JS中常见的异步调用 ① 定时任务 ② Ajax ③事件函数 异步模式可以一起执行多个任务，但是结果顺序不确定，结果依赖于请求的这个程序的顺序 如许要规定结果打印的顺序就需要函数嵌套，但是函数嵌套会形成回调地狱，于是就需要用到 promise 2. Promise Promise 是异步编
Express 的基本使用 + nodemon
qq_53283188的博客
06-05 1493
学习目标 ◆ 能够使用 express.static() 快速托管静态资源 ◆ 能够使用 express 路由精简项目结构 ◆ 能够使用常见的 express 中间件 ◆ 能够使用 express 创建 API 接口 ◆ 能够在 express 中启用 cors 跨域资源共享 文章目录学习目标一、初识 express1. Express 的基本使用2. 监听 GET 和 POST 请求，并影响客户端 一、初识 express express 简介 官方给出的概念：Express 是基于 Nod
http 模块 + 创建 web 服务器
qq_53283188的博客
05-19 1306
学习目标 ◆ 能够使用 http 模块写一个基本的 web 服务器 ◆ 能够说出模块化的好处 ◆ 能够知道 CommonJS 规定了哪些内容 ◆ 能够说出 Node.js 中模块的三大分类各自是什么 ◆ 能够使用 npm 管理包 文章目录学习目标一、服务器相关的概念二、http 模块三、创建 web 服务器1. 实现步骤和核心代码2. req 请求对象 与 res 响应对象3. 解决中文乱码问题四、根据不同的 url 响应不同的内容 一、服务器相关的概念 ip 地址 IP 地址 就是互联网上每台计
Node 读取 + 写入 + 路径问题
qq_53283188的博客
05-18 1145
学习目标 ◆ 能够知道什么是 Node.js ◆ 能够知道 Node.js 可以做什么 ◆ 能够说出 Node.js 中的 JavaScript 的组成部分 ◆ 能够使用 fs 模块读写操作文件 ◆ 能够使用 path 模块处理路径 ◆ 能够使用 http 模块写一个基本的 web 服务器 文章目录学习目标一、Node二、fs 文件系统1. fs 文件系统模块2. 读取 fs.readFile()3. 写入 fs.writeFile()三、fs 路径问题使用 __dirname 解决路径拼接问题
XMLHttpRequest + JSON + 文件上传 + axios
qq_53283188的博客
05-13 1126
目标 能够知道如何使用 XMLHttpRequest 发起 Ajax 请求 能够知道如何封装自己的 Ajax 函数 能够使用 XMLHttpRequest Level2 中提供的新特性 能够知道 jQuery 中如何实现文件上传与loading效果 能够知道如何使用 axios 发起 Ajax 请求 文章目录目标一、XMLHttpRequest1. 使用 `xhr` 发起GET请求2. 了解 `xhr` 对象的 `readyState` 属性3. 查询字符串4. URL编码与解码如何对URL进行编码与解
正则表达式
qq_53283188的博客
05-09 926
文章目录正则表达式一、正则表达式的创建二、测试正则表达式三、元字符(特殊字符)1. 边界符2. 字符类 正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式 在 JavaScript 中，正则表达式也是对象 一、正则表达式的创建 通过构造函数创建 var regexp = new RegExp(/123/) 利用字面量创建 正则表达式 var rg = /123/ 二、测试正则表达式 .test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返
npm
qq_53283188的博客
05-20 799
文章目录一、包二、npm 初体验1. 装包2. 格式化时间的做法对比3. node_modules 和 pageage-lock.json4. 安装指定版本的包5. 包的语义化版本 一、包 Node.js 中的第三方模块又叫做包 包的来源 Node.js 中的包是由第三方个人或团队开发出来的，都是免费且开源的，不需要付费即可免费下载使用 包是基于内置模块封装出来的，提供了更高级、更方便的 API，极大的提高了开发效率 搜索包的网站： npm 下载包的网站： https://registry.npmjs.or
数组变异方法、替换数组、动态数组响应式数据
qq_53283188的博客
06-05 653
数组变异方法
函数的定义和调用 + 改变this指向方法 + 闭包 + 递归
qq_53283188的博客
05-07 647
文章目录一、函数的定义和调用1. 函数的定义2. 函数的调用二、三、四、五、 一、函数的定义和调用 1. 函数的定义 函数声明方式 function 关键字 (命名函数) function fn(){} 函数表达式(匿名函数) var fn = function(){} new Function() var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Function('参数1','参数2
路由 + Express 路由
qq_53283188的博客
06-05 620
1. 学习目标 ◆ 能够熟练 express 路由的使用 ◆ 掌握中间件的使用方式 ◆ 能够说出中间件分为哪几类 ◆ 了解如何自定义中间件 ◆ 能够基于 exprss 写接口 ◆ 能够说出解决跨域问题的方法 cors ◆ 掌握如何实现 JSONP 接口 文章目录1. 学习目标一、Express 路由1. 路由的概念2. Express 中的路由3. 路由的匹配过程4. Express 路由最简单的用法5. 模块化路由6. 注册路由模块7. 为路由模块添加前缀二、中间件1. 中间件的概念2.
Vue 组件 + 组件之间传值 + 组件插槽
qq_53283188的博客
06-05 604
文章目录一、组件注册1. 全局注册 一、组件注册 组件就是把各自独立的积木拼成一个整体进行数据交互 1. 全局注册 组件注意事项 全局组件 注册后，任何 vue实例 都可以用 组件参数的data值必须是函数同时这个函数要求返回一个对象 组件模板必须是单个根元素 组件模板的内容可以是模板字符串 Vue.component('组件名称', { data: function () {return{}}, // data 在这里是函数 template: '模板' }) 就是相当于封
监听事件 + 鼠标事件 + 键盘事件
qq_53283188的博客
04-08 581
一、注册事件 传统 用on开头的 唯一性：同一个元素同一个事件只能设置一个处理函数 btn.onclick = function() {} 监听注册方式 .addEventListener('click', function() {}, ) 二、删除事件（解绑事件） 传统 <div>鲸渔</div> <script> var div = document.querySelector('div'); div.onclick = function
ES6新增语法 + 内置对象扩展 + 箭头函数
qq_53283188的博客
05-09 573
文章目录ES6语法 ES6语法 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织，制定的一项脚本语言的标准化规范
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值