首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当达到特定屏幕尺寸时隐藏"onclick“行(显示:无)/响应

当达到特定屏幕尺寸时隐藏"onclick"行,可以通过使用媒体查询和JavaScript来实现。

首先,使用媒体查询来检测屏幕尺寸是否达到特定条件。例如,如果要隐藏"onclick"行当屏幕宽度小于600像素时,可以使用以下媒体查询:

代码语言:txt
复制
@media (max-width: 600px) {
  .onclick-row {
    display: none;
  }
}

上述代码表示当屏幕宽度小于600像素时,将具有"class"为"onclick-row"的元素的显示属性设置为"none",从而隐藏该行。

然后,使用JavaScript来检测屏幕尺寸的变化,并根据条件来动态添加或移除"class"为"onclick-row"的元素上的样式。例如,以下是使用JavaScript实现的示例代码:

代码语言:txt
复制
window.addEventListener('resize', function() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var onclickRow = document.querySelector('.onclick-row');

  if (screenWidth < 600) {
    onclickRow.classList.add('hidden');
  } else {
    onclickRow.classList.remove('hidden');
  }
});

上述代码中,通过监听窗口的resize事件,获取当前屏幕的宽度,并根据条件判断是否添加或移除"class"为"hidden"的样式,从而隐藏或显示"onclick"行。

需要注意的是,以上代码中的".onclick-row"和".hidden"是示例的类名和样式名,你可以根据实际情况进行修改。

推荐的腾讯云相关产品:腾讯云移动推送服务(https://cloud.tencent.com/product/tpns)可以用于在移动应用中实现消息推送功能,适用于各类应用场景,包括社交、电商、游戏等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【JQuery】扩展BootStrap入门——知识点讲解(二)

栅格 2.1 简述栅格系统 2.2 栅格系统的特点及入门案例 2.3 栅格屏幕尺寸设置 2.4 设置屏幕尺寸时的注意事项 2.5 列偏移 3. 响应式工具 4. 列表(美工知识:了解) 1. ...small: sm : sm ----- 小屏幕 , iPad 尺寸 x small : xs ----- 超小屏幕,智能手机尺寸 示例: 代码准备: 效果: 2.4 设置屏幕尺寸时的注意事项...其他屏幕尺寸均默认为 col-sm-12,col-xs-12 2.5 列偏移 通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移 来达到效果。...响应式工具 为针对性地在移动页面上展示和隐藏不同的内容, bootStrap 提供响应式工具。...可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素 帮助手册位置:全局 CSS 样式 --- 响应式工具 代码准备: 4.

80520

响应式设计

做响应式设计时,一定要确保 HTML 包含了各种屏幕尺寸所需的全部内容。你可以对每个屏幕尺寸应用不同的 CSS,但是它们必须共享同一份 HTML。...屏幕尺寸达到这个值时,网页的样式会发生改变,以便给当前屏幕尺寸提供最佳的布局。 因为要先实现移动版设计,所以更应该了解在更大的视口下网页长什么样,这样才能在一开始就写出合适的 HTML 结构。...它解决了在小屏幕里显示更多内容的问题,但是也有弊端。将重要元素(比如主要的导航菜单)隐藏起来会减少用户跟它们交互的机会。...当链接太小不好点击,或者用户想要把某个图片看得更清楚时,这个设置会阻止他们缩放页面。 # 媒体查询 媒体查询(media queries)允许某些样式只在页面满足特定条件时才生效。...# 添加响应式的列 许多响应式设计遵循这种方法:当设计要求元素并排摆放时,只在大屏上将它们摆放在一行。在小屏下,允许每个元素单独一行,填满屏幕宽度。

2.1K10
  • 【Web技术】522- 设计体系的响应式设计

    Resize - 调整大小 调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式...Reflow Show / Hide - 显示 / 隐藏 基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。...token,来控制界面元素在不同屏幕的显示与隐藏。...和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。...在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。 响应式设计的世界烟波浩渺,书不尽言,言不尽意。

    1.8K20

    前端移动web-day05学习笔记

    s(screen):表示屏幕尺寸,他们有四个可选值 lg:大栅格,这种栅格在屏幕宽度大于等于1200时可以排成一行,小于1200时每个栅格独占一行 md:中栅格,这种栅格在屏幕宽度大于等于992时可以排成一行...,小于992时每个栅格独占一行 sm:小栅格,这种栅格在屏幕宽度大于等于768时可以排成一行,小于768时每个栅格独占一行 xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行 x(1-12之间的数字,尺寸比例...col-lg-3 col-md-4:(1)表示该栅格在屏幕宽度 >= 1200时,占3份(宽度四分之一),(2)在992屏幕宽度时,占4份(宽度三分之一),(3) 显示一行...,将栅格隐藏,可以用隐藏的样式,这个样式包括四个: 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md...屏幕尺寸 隐藏,如果屏幕尺寸 显示 b.如果希望一个栅格在屏幕尺寸 时隐藏,可以设置栅格隐藏样式为:hidden-sm hidden-xs

    2.9K20

    网页布局的几种方式有哪些_做网页建议用哪种布局

    比如像 bootstrap,foundation 这些框架采用的就是栅格系统,只要给页面元素添加其栅格系统指定的类名,就能达到想要的响应式布局效果。   ...在这种布局方式下,当视口大小低于设置的最小视口时,界面会出现显示不全,溢出,并出现滚动条。而且当需求改变时,可能会改动多套代码。   ...响应式布局   响应式布局的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、ipad等)都能显示出令人满意的效果。...要匹配足够多的屏幕大小,工作量不小,而且页面中会出现隐藏元素的操作,这样代码就比较冗余,加载时间加长,此外设计也需要多个版本。...自适应对页面的屏幕适配实在一定的范围,比如:pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口,而不是为每个终端做一个特定的版本

    3K20

    H5 App实战进阶十三:H5 App的响应式设计与适配多屏幕

    本文将深入探讨响应式设计的原则、工具和技术,并通过实例展示如何在H5 App中实现多屏幕适配。核心内容1. 响应式设计原则灵活性:布局应能够根据不同屏幕尺寸和分辨率进行自适应调整。...媒体查询:使用CSS媒体查询来针对不同屏幕尺寸应用不同的样式。优先级:确保在较小屏幕上显示最重要的信息,避免内容过载。2....响应式布局技术弹性盒模型(Flexbox):允许容器内的元素以灵活的方式排列,适应不同的屏幕尺寸。网格布局(Grid Layout):提供一个二维布局系统,使内容能够按行和列进行组织。...使用媒体查询(@media (max-width: 768px))来调整小屏幕上的布局,隐藏菜单项,并在点击汉堡菜单图标时显示。添加了一些基本的样式,如背景颜色、文本颜色、悬停效果等。...通过掌握响应式设计原则、布局技术、图片与媒体处理、字体与排版等方面的知识,并结合实际案例进行实践,你将能够创建出适应多种屏幕尺寸和分辨率的H5 App。

    15010

    04 响应式

    bug: 弹出软键盘时,屏幕可视区宽高比例变化,可能导致检测有误*/ @media (orientation:portrait){} 屏幕垂直 @media (orientation:landscape...){} 屏幕水平      2、特点           2.1 媒体有覆盖性(当width: 1200px 时,符合下面两个条件,但是靠媒体样式的覆盖性,所以会采用第二个样式) @media...                    col-lg     大屏幕、大桌面显示器(>=1200px)                     col-md     中等屏幕、桌面显示器(>=992px...:共12列,当超大屏幕时,每列1div;当中等屏幕时,每2列1div.........                    visible-xs      超小屏幕显示                         hidden-xs     超小屏幕隐藏

    1.3K60

    04 响应式

    bug: 弹出软键盘时,屏幕可视区宽高比例变化,可能导致检测有误*/ @media (orientation:portrait){} 屏幕垂直 @media (orientation:landscape...){} 屏幕水平      2、特点           2.1 媒体有覆盖性(当width: 1200px 时,符合下面两个条件,但是靠媒体样式的覆盖性,所以会采用第二个样式) @media...                    col-lg     大屏幕、大桌面显示器(>=1200px)                     col-md     中等屏幕、桌面显示器(>=992px...:共12列,当超大屏幕时,每列1div;当中等屏幕时,每2列1div.........                    visible-xs      超小屏幕显示                         hidden-xs     超小屏幕隐藏

    1.1K00

    认识一下 Material Design Lite 布局组件

    确切的说,MDL可以根据屏幕的尺寸设定样式类 的不同显示效果: 桌面 - 当屏幕宽度大于840px时,MDL按桌面环境应对 平板 - 当屏幕尺寸大于480px,但小于840px时,MDL按平板环境应对...比如,自动隐藏 header、drawer区域等 手机 - 当屏幕尺寸小于480px时,MDL按手机环境应对 配置选项 MDL class 说明 mdl-layout 声明元素为布局组件 mdl-js-layout...声明布局头为可滚动 mdl-layout__header--waterfall 对多行标题,当滚动内容时,仅显示第一行 三、头部 - 导航/Navigatoin 在header子元素内可以使用导航...当用户点击 选项栏中的链接/tab*时,自动显示对应的选项面板: ?...可以设置修饰样式类mdl-layout--fixed-drawer来强制显示侧拉菜单(在小尺寸 屏幕下,侧拉菜单总是隐藏的): <div class="mdl-layout mdl-layout--fixed-drawer

    2.5K20

    第122天:移动端开发常见事件和流式布局

    可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的效果。...touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动。...touchend:当手指离开屏幕时触发。 touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用。...三、响应式开发 1、什么是响应式开发 在移动互联日益成熟的时候,我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 通常的做法是针对移动端单独做一套特定的版本。...sm小屏幕 平板 (≥768px)、md中等屏幕 桌面显示器(≥992px)、lg大屏幕 大桌面显示器 (≥1200px)四种。

    3.6K40

    Bootstrap响应式工具

    xl(超大屏幕):适用于大型台式机和显示器,屏幕宽度大于等于1200px。通过在类名中使用这些断点,开发者可以根据不同屏幕尺寸应用特定的样式或布局。...显示/隐藏类Bootstrap提供了一些用于控制元素在不同屏幕尺寸下显示或隐藏的类。这些类可以根据需要在不同的断点上添加或移除。...以下是Bootstrap提供的显示/隐藏类:.d-none:在所有断点上隐藏元素。.d-{breakpoint}-none:在指定断点上隐藏元素,例如.d-sm-none在小屏幕上隐藏元素。....d-{breakpoint}-inline-block:在指定断点上以内联块元素显示元素。通过使用这些显示/隐藏类,可以根据不同屏幕尺寸来控制元素的可见性,从而实现更好的响应式布局。...通过使用Bootstrap的响应式工具,我们可以轻松地创建适应不同屏幕尺寸和设备的网页布局。响应式断点、显示/隐藏类和宽度调整类提供了灵活的布局控制,使开发者能够构建出具有良好用户体验的响应式设计。

    2.3K40

    第11章 手机响应式开发(下)

    其中标签可以针对不同屏幕尺寸,显示不同的图片。上述代码表示,当屏幕的宽度小于800px时,网页将显示1.jpg图片,否则,将显示标签中的2.jpg图片。...使用标签,可以做到不是简单地响应设备大小,而是可以根据屏幕的尺寸调整图片的宽高。...语法: @media screen and (min-width: 800px) { css样式代码 } 当屏幕的宽度大于800px时,将应用大括号内的CSS样式代码。...隐藏表格中的列 指在移动端中,隐藏表格中不重要的列,从而达到适配移动端的显示效果。...实现技术,主要是应用CSS中媒体查询的media关键字,当检测到移动设备时,根据设备的宽度,将不重要的列,设置为display:none。

    71720

    最新iOS设计规范七|10大视觉规范(Visual Design)

    其他设备(例如iPhone SE和iPad Air)具有矩形显示屏。 如果您的应用在特定设备上运行,请确保该应用在该设备的所有屏幕尺寸上运行。...例如:当垂直尺寸类型从紧凑高度变为常规高度时,可能是因为用户将设备从横向旋转到纵向,标签栏可能会变得更高。 1. 设备尺寸类型。根据屏幕尺寸,不同尺寸类别组合适用于不同设备上的全屏体验。 ? ?...请注意,当诸如录音和位置跟踪之类的后台任务处于活动状态时,全屏iPhone上的状态栏不会更改高度。 如果你的APP当前隐藏状态栏,请重新考虑全屏iPhone的隐藏与否。...允许自动隐藏指示器以防误点入主屏幕。启用自动隐藏后,如果用户几秒钟未触摸屏幕,指示灯就会淡出。当人们再次触摸屏幕时,它会重新出现。此行为仅适用于被动观看体验,如播放视频或照片幻灯片。...当视频内容使用嵌入式信箱或邮筒模式填充以符合特定的纵横比时,iOS无法根据用户选择的观看模式正确地缩放视频。嵌入的视频会使其在全屏模式和适合屏幕模式下显示得更小。

    8.1K30

    大厂前端面试考什么?5

    当该属性值大于 1M 时,需要按照时间排序系统中的数据,删除一定量的数据保证能够存储下目前需要存储的数据。每次取数据时,需要判断该缓存数据是否过期,如果过期就删除。...单行、多行文本溢出隐藏单行文本溢出overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 溢出用省略号显示white-space...媒体查询,添加⾃CSS3,允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪,⽽不必改变内容本身,适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。...@media 可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是非常有用的。当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。...以 iPhone XS 为例,当写 CSS 代码时,针对于单位 px,其宽度为 414px & 896px,也就是说当赋予一个 DIV元素宽度为 414px,这个 DIV 就会填满手机的宽度;而如果有一把尺子来实际测量这部手机的物理像素

    96820

    面试官:CSS 面试题集锦

    非常少见的情况下多个absolute交错覆盖,或者需要显示最高层次的模态对话框时,可以设置z-index > 1。...使用overflow:hidden隐藏溢出内容 overflow:hidden这种方式可以隐藏掉固定区域外的内容,它可以有效控制显示区域。但应注意,使用它时需要给它定义宽度和高度,否则会无效。...什么是栅格系统 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。...通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适合相应的设备显示;即响应式布局 @media screen and (min-width: 400px) and (max-width: 700px...自适应暴露的一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。

    3.3K30

    《CSS世界》第六章 流的破坏与保护总结

    absolute与text-align text-align会改变absolute元素的位置,本质是“幽灵空白节点”和“无依赖绝对定位”共同作用的结果,具体就是由于绝对定位元素不占据CSS流中的尺寸空间...// 这种方式既满足视觉上的隐藏,屏幕阅读器等辅助设备又支持很好(display: none;不识别或者不可focus)。...移动端中可以使用透明度为0. .clip { position: absolute; clip: rect(0 0 0 0); } clip隐藏仅仅决定了那部分可见,非可见部分不响应点击事件等;虽然视觉上隐藏了...absolute的流体特性 当对立方向同时发生定位时,表现为格式化宽度,自适应包含块的padding box。具备自适应性。 margin: auto;可以让绝对定位元素居中。...对立方向同时发生定位时,只有一个方向的定位属性起作用。 固定定位 与无依赖绝对定位相同,也存在无依赖固定定位。

    79330

    bootstrap快速入门笔记(二)-栅格系统,响应式类

    超小屏幕 手机 (屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列...为了克服这一问题,建议联合使用 .clearfix和响应式工具类 *如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。...四,响应式工具类 通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。...超小屏幕手机 (屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-...打印类 和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容。

    1.1K30

    Bootstrap实用手册

    页面上的图片和文字要随着屏幕尺寸发生改变 (2). 页面的布局随着屏幕尺寸而发生改变 2....指定列在特定屏幕下不显示 A. .hidden-lg : 在 lg 下隐藏 B. .hidden-md : 在 md 下隐藏 C. .hidden-sm : 在 sm 下隐藏 D. .hidden-xs...响应式导航条 当屏幕尺寸大于 768px 时候,可以正常显示出所有的内容,当屏幕尺寸小于 768px时候,一部分内容就会隐藏,通过点击弹出,响应式导航条由两部分组成. ①. class .navbar-header....navbar-collapse 折叠按钮,当屏幕大于 768px 正常显示,屏幕尺寸小于 768px隐藏,通过按钮点击完成展开显示 注意:响应式导航条的结构——只有从手机屏幕才能看出来 ?...修改Bootstrap组件的细节样式,实现细粒度定制 修改特定的组件对应的less文件,如dropdown.less 55. 项目不允使用Bottstrap时,提取以下css样式文件 (1).

    6K20

    总是听别人说响应式布局,原来这么简单

    什么是响应式布局 ? [图片来源 caktusgroup] 如图就是响应式布局的体现,简单的说响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。...响应式布局没有绝对的话好与坏,需要根据网站的性质来确定,比如 toutiao的页面元素非常多,页面需要包括所有屏幕尺寸的样式显示不是很好操作,然而 segmentfault页面元素较少,反而放在一起方便维护... 我们简单解释一下上述代码片段 min-width指的是当屏幕尺寸大于当前值的时候样式生效。 外层的 div包裹内层的两个 div。...col-md-6col-sm-12当屏幕尺寸大于 768px的时候子 div宽度是父 div的一半,所以是并排。当屏幕尺寸大于 480px的时候子 div宽度和父 div的宽度一样。...下图为不同尺寸下的效果图。 768px ? 480px ? 注意观察的同学又发现问题了,图二没有办法看啊,太小了吧。是的,我们的响应式还没有做完,这个时候我们在 head里面添加如下一行代码再试试?

    79050
    领券