这些设备特性包括： 网络连接方式 屏幕尺寸 交互类型（触摸屏，触摸板） 图形分辨率。 在响应式网页设计流行之前，许多公司在处理不同用户设备访问网站时，需要根据不同设备类型将用户重定向到不同的站点上去。...虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功能也在浏览器中得到广泛采用和支持。在响应性网页设计方面，Flexbox是这些新的重要CSS功能之一。 什么是Flexbox？...在这种情况下，我们可以使用另一种技术-水平滚动。 使用内容溢出滚动条进行水平滚动 可能会有这样一种情况：您的内容会溢出界面，而没有一种优雅的处理方式去解决。...没关系，内容溢出滚动条可以为你解决这个问题。 此技术的常见用途包括可滚动菜单和表格。下面是一个可滚动菜单的示例。...是关键，通过设置overflow，子元素将通过水平轴溢出并出现横向滚动条。
1、响应式布局 开发一个页面，在所有的设备上都能够完美展示。...视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orientation：检查设备处于横向（landscape）还是竖屏（portrait） 2、响应式设计设计点...关于响应式设计的思考： 根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。...（4） 多行文本溢出••• 单行文本溢出，对title类的使用非常多，而多行文本类，在详情介绍则用的比较多。...上拉刷新 tap事件基础 touch触摸事件 下拉加载 300ms: 移动web页面上的click事件响应都要慢上300ms 用300ms判断是单击还是双击 (1) tap基础事件 300ms延迟怎么破
“误触”的情况，比如一个编辑表单（宽度很大，可以左右滚动），我填写了很多的内容，在一个表格中左右滚动的时候，返回了前一个页面，我在页面中填了很多的东西就会不见...这会很让我奔溃。...none 表示相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。...contain 默认的滚动溢出行为将被内部的元素观察到，(例如: “bounce” 效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如：在下面的元素不会被滚动。...这里看一个例子——Demo 地址[3]，可以默认情况下，内部容器滚动到最底部的时候，会触发整个页面进行滚动。...用于设置触摸屏用户如何操纵元素的区域 (例如，浏览器内置的缩放功能)。
CSS 锚点定位使用场景 当用户向下滚动页面时跟随用户的元素。 当用户单击按钮时展开和折叠的手风琴。 根据多个锚点位置调整图像大小 显示在页面其余部分的模式对话框。...在下面的示例中， shape-overflow: clip 将允许内容溢出形状，但它将被限制在元素的笔画框内： 滚动捕捉(scroll snap) CSS 滚动捕捉模块提供的属性可让您通过定义捕捉位置来控制平移和滚动行为...当用户滚动滚动容器内的溢出内容时，内容可以被捕捉到位，从而提供分页和滚动定位。...： 使用触摸手势更容易捕捉到捕捉位置。...“网格”选项卡将向你显示 CSS 网格布局的可视化。可视化将向你显示网格线、网格轨道和网格项目。 CSS 子网格是一个有价值的工具，可用于创建复杂的响应式布局。
响应式设计 顾名思义，一套页面，在所有端（pc、超大屏、ipad、手机等）完美运行。随页面宽高变化而改变页面样式，从而适配不同设备。...文本溢出 /* 单行文本溢出*/ .line{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }...每个touch对象包含属性 clientX：触摸目标在视口中的横坐标 clientY：触摸目标在视口中的纵坐标 identifier：标识触摸的唯一id pageX：触摸目标在页面中的横坐标（含滚动）...pageY：触摸目标在页面中的纵坐标（含滚动） screenX：触摸目标在屏幕中的横坐标 screenY：触摸目标在屏幕中的纵坐标 target：触摸的DOM节点的目标 d....但与此同时，要注意随之产生的一个问题，就是组织默认事件后，页面也会随之禁止滚动，因此看情况使用。
18、layerJS https://layerjs.org/ image.png 一款你只需要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的框架，这个框架代码压缩版只有...30KB,很方便与各种前端框架集成(Angular,VueJS,React),支持响应式和触摸，并且不依赖任何库就能实现。...方便集成到你的项目里，这款强大的富媒体编辑器有以下特点： 支持 CommonMark 与 GFM（GitHub Flavored Markdown）两种标准 支持丰富的扩展插件，如颜色选择器、图表、UML、表格合并...提供了所见即所得与 Markdown 这两种模式，在编辑过程中可以随时切换，非常方便。...nickpiscitelli.github.io/Glider.js/ image.png 一个超快速(25毫秒加载)，轻量级(小于3KB)，无依赖性(不需要jQuery)的制作幻灯效果的前端库，支持响应式
它支持触摸设备和 Swiping，自带CSS过渡，支持键盘，箭头和圆点导航等等。 4....6. uSlider 这是一个响应式和触摸友好的 jQuery 插件滑块。内容可以是任何东西：图像，文本，内部框架， HTML5视频和音频 。 7....Slideme Slideme 是一个响应式的滑块插件 ，可定制，易于使用 ，多实例，全屏。 12. Glide.js 响应式，触摸友好的 jQuery 滑块。...结合 CSS3 Transition 实现响应式的滑块效果。 14. RTP Slider.js 15....Flex Slider FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。
Grid level 2 and subgrid Subgrids——你能够在一个网格内部继续布局一个子网格，该子网格继承父网格的相关属性。...Scroll snapping（滚动捕捉） CSS Scroll Snapping意味着您可以创建捕捉滚动点的界面。...下面的代码创建了一个项目列表，其中父项具有固定高度，溢出设置为滚动。我希望项目在滑动到顶部进行捕捉。...您的访问者可能正在使用键盘、鼠标或可触摸设备访问您的网站。 例如微软Surface Book就像传统笔记本电脑一样，也有触摸屏。因此，查看屏幕大小并不是查找用户实际拥有的设备类型的好方法。...例如，如果我想为触摸屏用户添加一些css。
ClampingScrollPhysics ： 防止滚动超出边界，夹住 。 AlwaysScrollableScrollPhysics ：始终响应用户的滚动。...NeverScrollableScrollPhysics ：不响应用户的滚动。...applyBoundaryConditions 方法中，在计算边界条件值的时候，滑动值会和边界值相减得到相反的数据，使得滑动边界相对静止，从而达到“夹住”的作用 ，也就是动态边界 ，所以默认请下 Android 上滚动到了边界就会停止响应...对于 Simulation 的内部计算逻辑这里就不展开了，大致上可知 ClampingScrollSimulation 的摩擦因子是固定的，而 BouncingScrollSimulation 内部的摩擦因子和计算...总结起来就是 ScrollPhysics 中控制了用户触摸转化和边界条件，并且在用户停止触摸时，利用 Simulation 实现了自动滚动与溢出回弹的动画效果。 自此，第十八篇终于结束了！
来看看这么一种情况： 我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器： 如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器...，是可以响应鼠标滚轮的： 垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容 水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容 那么，这里可能就是一个用户痛点。...那是必须的，本文就将介绍一种可能可行的技巧，在特定场景下在水平方向溢出滚动的容器，依然可以用鼠标滚轮进行滚动。 旋转大法 是的，既然只有垂直方向的溢出，才能响应滚轮操作。那我们不妨从这个角度入手。...当然，这样还有个非常严重的问题，如果容器内存在内容，那么就变成了这样： Oh，由于容器整体旋转了 90°，里面的内容当然也一起发生了旋转。我们需要解决这个问题。...如果内部的 DOM 复杂一点，整体改造的成本就非常高了，不太适合。
---- 行为（此部分见原网站） 默认情况下，悬浮响应式按钮在屏幕上以动画形式展开。 其中的icon可能是动态的。 由于其相对而言的重要性，悬浮响应式按钮的移动方式可能与其他UI元素不同。 ?...悬浮响应式按钮的设计灵活。 尝试最适合您的app和按钮所在屏幕的变换。 触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动的动画向外扩展导致UI变化。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏 当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。...不要在浮动操作按钮操作中放置溢出菜单。 从最初的屏幕应该最多只有两次点击就能到达预期的目的地。 ? 将溢出操作置于工具栏中的溢出菜单中，而不是悬浮响应式按钮中。 ?...如果app的特点是添加文件类型，浮动操作按钮可以在第一次触摸后转换为相关操作。 但是，如果显示的操作与按钮无关，请将操作放入溢出菜单。 ? 悬浮响应式按钮可以包含联系人列表。
现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 linwu的算法笔记 在腾讯做的是H5开发相关的项目，也就是做了很久的切图仔了，分享些H5相关的踩坑经验 响应式布局...在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。....element { transform: translate3d(0, 0, 0); } ⭐️⭐️控制溢出文本 使用CSS的text-overflow、white-space、-webkit-line-clamp...组件库解决方式 思想思路： 针对触摸滑动事件 touchmove，通过监听滑动方向和滚动元素的状态，决定是否阻止默认的滑动行为，从而防止滚动穿透。...在解锁滚动时，从 document 移除对触摸事件的监听器，恢复默认的滑动行为。
官网 slidesJs：响应式的 jQuery（1.7.1+）幻灯片插件，具有触摸、 CSS3 过渡等特性。官网 FlexSlider：一款令人惊叹的、全响应式的幻灯片 jQuery 插件。...官网 Flickity：可触摸的、响应式的和可轻弹的画廊。官网 滑块控件 Ion.RangeSlider：强大的、易于自定义的范围滑块选择库，支持很多配置和皮肤。...其支持响应式、可堆叠和 ajax 等。官网 css-modal：纯 CSS 打造的模态框。...官网 Slideout：为移动设备的 web 应用制作出响应式的、可触摸滑出的导航菜单。官网 Slide and swipe：一个基于 touchSwipe 库的滑出菜单插件。...（jQuery 插件）官网 floatThead：（jQuery 插件）锁定表格头部，只允许表格内容滚动。适用于任何表格，而且不需要额外的 html 或 css。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？...紧缩型表格 .table-responsive 响应式表格 状态类 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作...("width", width+"%").text(width+"%"); } } 响应式开发 为什么要进行响应式开发？...同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。 什么是响应式？ 利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。...用到的技术： CSS3@media查询 用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。
slidesJs -是适用于JQuery（1.7.1+）的幻灯片插件插件，具有触摸和CSS3转换等功能 FlexSlider - 一个真棒，完全响应的jQuery滑块插件。...jcSlider - 一个响应式滑块jQuery插件与CSS动画。 basic-jquery-slider - 使用简单，主题简单，易于定制。...Flickity - 触摸，响应，闪烁的画廊。 Glide.js - 响应和触摸友好的jQuery滑块。...用于制作响应式的大型下拉菜单，如亚马逊。 jQuery contextMenu - 上下文菜单管理器 Slideout - 针对移动网络应用的响应式触摸滑出导航菜单。...floatThead -（jQuery插件）在身体内滚动时锁定任何表的标题。 适用于任何表格，不需要自定义的HTML或CSS。 Masonry - 级联网格布局库。
，包括顶部 的CSS组件内部也可以任意使用这些基础组件 3.jQuery 4.响应式设计：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，包括弹性网格和布局...列嵌套：在一个列里再声明一个或者多个行（row），内部所嵌套的row的宽度为100%时就是当前外部列的宽度 3.列排序：通过.col-md-push-*和.col-md-pull-*一实现 4.响应式栅格...：中型屏幕md，超小型xs、小型sm、大型lg 5.使用clearfix清除浮动 C.CSS组件架构的设计思想 1.CSS组件AO模式：A表示Append，即“附加”的意思；O表示Overwrite，即...,initial-scale=1.0"/>，添加user-scalable=no可以禁用其缩放（zooming）功能 2.响应式图片：.img-responsive样式 3.Normalize.css，...tr、td上使用： .active表示当前活动的信息 .warning表示警告 .success表示成功或者正确的行为 .danger表示危险或者可能是错误的行为 .info表示中立的信息或行为 7.响应式表格
margin-left: -200px; /* width/2 */ margin-top: -100px; /* height/2 */ } 支持：ie各个版本 缺点：非响应式.../div> 2. text-align 四、对照表 所用样式 支持的浏览器 是否 响应式...内容溢出后的样式 resize:both 高度可变 主要缺陷 Absolute 现代浏览器&IE8+ 是 会导致容器溢出 是 是* ‘可变高度’的特性不能跨浏览器 负margin值 所有 否 带滚动条...大小改变后不再居中 否 不具有响应式特性，margin值必须经过手工计算 Transform 现代浏览器&IE9+ 是 会导致容器溢出 是 是 妨碍渲染 Table-Cell 现代浏览器&IE8+ 是...撑开容器 否 是 会加上多余的标记 Inline-Block 现代浏览器&IE8+&IE7* 是 撑开容器 否 是 需要使用容器包裹和hack式的样式 Flexbox 现代浏览器&IE10+ 是 会导致容器溢出
）和缩放手势由浏览器专门处理，但是可以通过 CSS 特性 touch-action 来改变触摸手势的行为。...Step 1、监听弹窗最外层元素（popup）的 touchmove 事件并阻止默认行为来禁用所有滚动（包括弹窗内部的滚动元素）。...() }) scrollBox.addEventListener('touchmove', (e) => { // Step 2: 阻止冒泡 e.stopPropagation() }) 滚动溢出...问题描述 如上录屏所示，弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll...❌ 解决方案A (overscroll-behavior) overscroll-behavior 是 CSS 的一个特性，允许控制浏览器滚动到边界的表现，它有如下几个值。
如果两个中断的抢先优先级相同，谁先出现，就先响应谁，不构成嵌套。如果一起出现（或挂在那里等待），就看它们2个谁的子优先级高了，如果子优先级也相同，就看它们的中断向量位置了。...22、 上电初始化后AIRC初始化为0，为16个抢先式优先级，但是由于所有的外部通道中断优先级控制字PRI_n为0，所以抢先式优先级相同，此时就不能嵌套了 23、 NVI中有ISER[2]（Interrupt...59、关于内部上下拉电阻的设置：如果外部的按键另一头接地，那么需要设置成上拉电阻。（理由是当没有按下按键时，由于上拉，输入为高电平；按下时，由于外部接地，输入为低电平。）...63、定时器的时钟来源有4个：内部时钟（CK_INT），外部时钟模式1（TIx），外部时钟模式2（ETR），内部触发模式（ITRx，这个用来定时器的同步） 64、定时器中断溢出更新时间：Tout=((arr...117、 CAN总线的波特率 118、 触摸屏一般分为电阻式触摸屏和电容式触摸屏。前者检测触摸的位置原理是利用触摸屏控制器中的A/D转换器经过两次A/D读值后得出X和Y的坐标值。
，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式 修改常规流中元素的...此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...原理类似图片轮播原理，超出隐藏部分，滚动时显示 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none; 什么是响应式设计...响应式设计的基本原理是什么？如何兼容低版本的IE？...响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本 基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式 对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
