首页
学习
活动
专区
工具
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.

79320

响应式设计

响应式设计时,一定要确保 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<=屏幕宽度<1200,占4份(宽度三分之一),(3) <=992 直接显示...,将栅格隐藏,可以用隐藏的样式,这个样式包括四个: 1、.hidden-xs 在屏幕小于768将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992将栅格隐藏 3、.hidden-md...屏幕尺寸 <992区间隐藏,如果屏幕尺寸 <= 768,则又会显示 b.如果希望一个栅格在屏幕尺寸 <= 992隐藏,可以设置栅格隐藏样式为:hidden-sm hidden-xs

    2.9K20

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

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

    3K20

    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

    Bootstrap响应式工具

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

    2.2K40

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

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

    3.6K40

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

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

    71220

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

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

    8K30

    《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;可以让绝对定位元素居中。...对立方向同时发生定位,只有一个方向的定位属性起作用。 固定定位 与依赖绝对定位相同,也存在依赖固定定位。

    78330

    大厂前端面试考什么?5

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

    96420

    面试官: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

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

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

    5.9K20

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

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

    77350

    3分钟理解响应式布局

    前言 总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了一下分享给大家。...什么是响应式布局 ? [图片来源 caktusgroup] 如图就是响应式布局的体现,简单的说响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。...响应式布局没有绝对的话好与坏,需要根据网站的性质来确定,比如 toutiao的页面元素非常多,页面需要包括所有屏幕尺寸的样式显示不是很好操作,然而 segmentfault页面元素较少,反而放在一起方便维护...col-md-6col-sm-12屏幕尺寸大于 768px的时候子 div宽度是父 div的一半,所以是并排。屏幕尺寸大于 480px的时候子 div宽度和父 div的宽度一样。...下图为不同尺寸下的效果图。 768px ? 480px ? 注意观察的同学又发现问题了,图二没有办法看啊,太小了吧。是的,我们的响应式还没有做完,这个时候我们在 head里面添加如下一代码再试试?

    91920
    领券