JQuery 的魔法JQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档的遍历和操作、事件处理、动画等操作。...通过 CSS，我们设置了广告容器的样式，初始状态为隐藏。在脚本部分，我们使用 JQuery 的 toggle 方法，使得点击按钮时广告的显示与隐藏状态切换。这是一个简单而实用的基础案例。...这样，广告将在按钮点击后经过一段时间再显示，营造更加自然的用户体验。响应式设计：适应不同设备的广告显示在移动设备普及的今天，响应式设计已经成为前端开发的标配。...为了确保广告在不同设备上有良好的显示效果，我们可以使用媒体查询（Media Query）和 JQuery 结合起来，实现广告的响应式设计。屏幕宽度，保证了响应式设计。总结通过本博客的学习，我们深入探讨了如何使用 JQuery 实现广告的显示与隐藏。
JQuery 的魔法 JQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档的遍历和操作、事件处理、动画等操作。...通过 CSS，我们设置了广告容器的样式，初始状态为隐藏。在脚本部分，我们使用 JQuery 的 toggle 方法，使得点击按钮时广告的显示与隐藏状态切换。这是一个简单而实用的基础案例。...这样，广告将在按钮点击后经过一段时间再显示，营造更加自然的用户体验。 响应式设计：适应不同设备的广告显示 在移动设备普及的今天，响应式设计已经成为前端开发的标配。...为了确保广告在不同设备上有良好的显示效果，我们可以使用媒体查询（Media Query）和 JQuery 结合起来，实现广告的响应式设计。 屏幕宽度，保证了响应式设计。 总结 通过本博客的学习，我们深入探讨了如何使用 JQuery 实现广告的显示与隐藏。
，达到根据屏幕大小显示不同布局的效果。...页面支持根据不同设备屏幕大小进行自适应布局，具体的样式控制依赖于引入的 css/style.css 文件，同时引入了 jQuery 库，方便后续进行脚本控制。 代码详细解释 1....javascript:void(0) 表示点击链接时不执行任何操作，可根据实际需求替换为具体的链接地址。 3....三、工作流程▶️ 实现自适应页面效果的整体思路 上述 HTML 和 CSS 代码实现自适应页面效果的核心思路是利用媒体查询（Media Query）结合 HTML 结构与 CSS 样式控制，根据不同的屏幕宽度调整页面布局和元素样式...移动端样式适配（媒体查询）：使用媒体查询（@media (max-width: 800px)）针对小屏幕设备（宽度小于等于 800px）调整样式。
CSS3 Media Query 可以根据不同的媒体类型以及特性执行不同的 CSS @media MEDIA-TYPE and | not | only (MEDIA-FEATURE) (1)....在屏幕下，宽度在 767 以内，执行操作 @media screen and (max-width:767px){} B....在屏幕下，宽度在 768~991 之间，执行操作 @media screen and (min-width:768px) and (max-width:991px){} C....在竖屏模式下执行的操作 @media all and(orientation :portrait){} (4). 常见屏幕尺寸： ①....，第三方的 JS，自调函数，用于让老 IE(IE8 及以下)支持 CSS3 媒体查询技术 - 响应式必备 通过头部引用 Hack 判断是否为 IE8 以及以下的浏览器 <!
等 respond——让低版本浏览器可以支持CSS媒体查询功能 条件注释：当满足if条件时，才执行里面的文件 <!...； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...--html5shiv让浏览器可以识别HTML5的新标签--> 10 的媒体查询--> 11 根据判断条件，决定CSS代码是否被执行 5、Bootstrap浏览顺序 （1）预置样式 预制排版样式——按钮样式——表格样式——表单样式——图片样式——辅助工具类——代码样式——栅格系统——响应式工具类...（2）预置界面组件 导航——导航条——面包屑导航——下拉菜单——按钮式下拉菜单——按钮组——警告框——页头——分页——列表组——面板——媒体对象——进度条——Glyphicons——大屏幕——嵌入内容
媒体查询(了解) :默认有一些分辨率零界点的阀值"" - 分辨率 屏幕大小 - 分辨率>=1200px 超大屏幕...格栅系统: "在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用" 行:..."通过class = "row" 来设置一个行" 列(最多将视口分为12列) "通过class属性来设置在不同屏幕时所占的列 n表示每格占的份数" col-lg-n 大屏 col-md-n.../标准按钮 btn-primary : 原始按钮样式(未必操作) btn-success : 表示成功的动作 btn-info : 该样式可用于要弹出信息的按钮 图片: img-rounded...插件: "jQuery 插件为Bootstrap 的组件赋予了"生命".可以简单的一次性引入所有插件,或者逐个引入到你的页面中."
(IE8及以下) 支持 H5的新标记以及 C3 媒体查询技术 1、html5shiv.min.js 第三方JS，自调函数，用于让老版本的IE支持HTML5新标记...支持CSS3媒体查询技术 <!...w <= 767px 各种PHONE屏幕 2、Bootstrap提供的两个容器class 1、定宽容器 在不同宽度大小的设备上均提供了固定的宽度值...: 警告(黄色底，白字) .btn-danger : 危险(红色底，白字) .btn-info : 信息(浅蓝底，白字) 4、不同尺寸的按钮...所以在创建列的时候要指定列的宽度(当前列要占据几列的宽) 4、列 会根据适用的屏幕分成4中类型 类： 1、
1、响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。...col-md-就行了，md是大于等于970以上的 小屏幕布局发生变化，因此需要为小屏幕根据需求改变样式布局 超小屏幕布局有发生变化，因此需要为超小屏幕根据需求改变样式 策略：先布局md.../* 利用媒体查询修改 container宽度适合效果图宽度 */ @media (min-width: 1280px) { .container { width: 1280px
媒体查询：@media screen and (max-width:100px) { } 媒体类型：screen（屏幕） print（打印机） handheld（手持设备） all（通用） 常用媒体查询参数...）还是竖屏（portrait） 2、响应式设计设计点 设计点一：百分比布局 仅仅使用媒体查询来适应不同固定宽度设计，只会从一组css到另一组css的切换。...只使用媒体查询，布局有时会变得不可控制。 当然，这只是建议，也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。...关于响应式设计的思考： 根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。...因为字体的大小是趋向于阅读的实用性，并不适合于排版布局。 同理，趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致（跟rem的目的相反）。
--页面宽度自适应设备的屏幕宽度-->
在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...这意味着，我们可以查询父元素的宽度并据此修改它。考虑下图 注意，每个卡片都有一个黄色的轮廓线，代表每个组件的父组件。使用CSS容器查询，我们可以根据父组件的宽度修改组件。...在CSS中，我们可以执行以下操作： .o-grid__item { contain: layout inline-size style; } .c-media { /* Default style...然后，再告诉浏览器，如果父元素的宽度等于或大于500px，它应该以不同的方式显示。对于700px查询也是如此。这就是CSS容器查询的工作原理。...我可以把这些组件分成以下几个部分 Viewport (媒体查询) Parent （容器查询） 通用:不受影响的组件，如按钮、标签、段落。 对于示例UI，下面是我们如何划分组件。
内容:决定什么内容是最重要的 布局:优先设计更小的宽度，基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。...-- 1.width 属性控制设备的宽度; 假设您的网站将被带有不同屏幕分辨率的设备浏览 device-width 可以确保它能正确呈现在不同设备上。...container-fluid类宽度不管屏幕宽度大小，一直是100%。 (5) 超大屏幕 Jumbotron 超大屏幕（Jumbotron）。...例如要创建三个相等的列，则使用三个 .col-xs-4 满足 1行十二列; 网页媒体查询是非常别致的”有条件的 CSS 规则”,常常用做于网页自适应； 媒体查询有两个部分，先是一个设备规范，然后是一个大小规则...响应式实用工具 描述:可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 注意:响应式实用工具目前只适用于块和表切换。 WeiyiGeek.
网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。...淘宝的方案总结为：根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，接着根据屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分，每份为a，1rem就等于10a...如果你使用sublimeText，可以用 rem-unit 如果你用vscode编辑器，推荐 cssrem 使用rem单位注意以下几点： 在所有的单位中，font-size推荐使用px，然后结合媒体查询进行重要节点的控制...已上图公积金查询为例，由于不同城市会有不同的查询要素，可能登陆方式只有一种，也可能有几种。比如上图有三种登陆方式，在使用vue布局时，有两种方案。...解决完布局问题后，我们需要根据设计图定义一些状态，比如当前登陆方式的切换、同意授权状态的切换、按钮是否可以点击的状态、是否处于请求中的状态。当然还有一些app穿过来的数据，这里就忽略了。
@media 部分： 这是媒体查询，用于响应式设计，根据不同的屏幕宽度调整 .options 容器的最小宽度，并隐藏相应的 .option 元素。...：这是 jQuery 的文档就绪函数，等同于 (document).ready(function() {...})，确保在文档的 DOM 结构加载完成后才开始执行其中的代码。...具有 active 类的元素使用 flex-grow 占据更多空间，其他元素占据较少空间。 页面通过 Flex 布局和媒体查询实现了基本的布局和响应式设计。...样式更新： 由于 CSS 中对 .option.active 和 .option:not(.active) 有不同的样式设置，添加 active 类的元素会展开，其宽度、圆角、阴影等样式会更新...移除 active 类的元素会收缩，样式也会相应改变，实现收缩动画。 响应式调整： 不同的媒体查询会根据设备的屏幕宽度隐藏部分元素，确保在不同屏幕尺寸下页面的布局和显示效果。
(行row+列column)，在不同的屏幕下显示不同的区域 c.复制粘贴 3.bootstrap环境配置 目前bootstrap有三个版本，分别是 2.x、3.x、4.x，2.x是旧的版本，3.x是新的稳定版本...-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。...（1）>1200 要求版心1100 （2）600 - 800之间 要求版心700 解决方案：使用媒体查询覆盖默认的版心 */ @media...在屏幕宽度小于768起作用 6-栅格隐藏 zz.jpg 在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm
1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：...宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2.0 bootstrap的介绍 2.1Bootstrap...，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
editors=1100 流体英雄高度 与前面的示例相关，英雄部分的高度可以根据视口大小而不同。因此，我们倾向于通过媒体查询或使用视口单元来改变它。....hero { min-height: clamp(250px, 50vmax, 500px); } 调整屏幕大小时，你会注意到高度会根据视口宽度逐渐变化。...最大值表示当前加载减去按钮宽度。 CSS clamp() 在这里为我们提供了这个组件的三个不同的统计信息，我个人喜欢这个解决方案！ 不仅如此，我们还可以为不同的设计扩展相同的概念。...它为零，因为我们使用的是 CSS 边框。 (var(--breakpoint) - 100%) * 999 根据视口宽度在 0px 或 100% 之间切换。...条件边界半径 大约一年前，我在 Facebook 提要 CSS 中发现了一个巧妙的 CSS 技巧。它是关于使用 CSS max() 比较函数根据视口宽度将卡片的半径从 0px 切换到 8px。
让低版本浏览器可以支持CSS媒体查询功能基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮式下拉菜单按钮组输入框组警告框页头分页列表组面板媒体对象进度条...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件的依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...框架：库 lib library jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式 把大家都需要的功能预先写好到一些文件 这就是一个框架 Bootstrap 让我们的 Web 开发更简单...，如header、footer、section等 respond 让低版本浏览器可以支持CSS媒体查询功能 基础CSS样式 概要 预置排版样式 统一预制标签样式 按钮样式...分页 列表组 面板 媒体对象 进度条 Glyphicons 标签 徽章 缩略图 大屏幕 嵌入内容 内嵌 JavaScript插件 JavaScript插件的依赖情况 如何使用Javascript
此概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。...Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query （媒体查询） 1.2.2 环境搭建 1.2.2.1 下载 中文官网地址...： 根据设置确定视口宽度，初始化的缩放比例是2.5，最小缩放比例1.5，最大缩放比例为3，允许在移动设置缩放 常用值： 媒体查询 注意：respond.js 不能本地运行（file://），必须放置在web服务器（http:// ,暂时不用掌握） --> 的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内 列大于12时，将另起一行排列 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
