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

前端如何提高用户体验:增强可点击区域的大小

WCAG准则 WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则,简单的说就是为了方便残障人士(包括低视患者,盲人,聋人,学习障碍,行动不便,认知障碍...在下面的图中,我模拟了两个按钮的不同情况。在左侧,按钮更小,更远,用户需要更多的时间与它互动。在右侧,按钮大小更大,更接近于它的同级输入元素,这将使交互更容易、更快。 ?...复选框和单选按钮 当存在复选框或单选按钮元素时,我希望可以单击它或关联的标签来激活/禁用它。 ? 从用户体验的角度来看,这是难以访问和糟糕的。... Option 1 或者可以将输入框放置在标签内: 复选框或单选按钮都是可单击的,如下图所 ? 侧边栏 对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说,可点击区域仅在文本上,如下图所示: ?

4.8K20

前端开发必备之Chrome开发者工具(上篇)

使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小,并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。...面板内右键点击某个元素,然后从菜单中选择目标伪类,将其启用或停用 ?...在 Elements 面板中选择元素,然后在 Styles 窗格中点击 :hov 按钮,使用复选框启用或停用当前选定元素的选择器 ?...由于每一条消息的时间戳均不同,因此,每一条消息都将显示在各自的行上 ? 选择执行环境 以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector ?...DevTools显示事件类别的列表,例如动画。 选中这些类别中的一个可以暂停该类别的任何事件,或者展开类别并检查特定事件。 ?

8.3K111
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    OpenGL ES 3.0 | 围绕HelloTriangle实战案例 展开 渲染流程分析

    ) 加载顶点、片段着色器 创建一个程序对象, 连接顶点、片段着色器, 并链接程序对象; 设置视口; 清除颜色缓冲区; 渲染简单图元 使颜色缓冲区的内容在EGL窗口表面(GLSurfaceView)中可见...着色器 在OpenGL ES 3.0中, 除非加载有效的顶点和片段着色器,否则不会绘制任何几何形状; OpenGL ES 3.0程序必须至少有 一个顶点着色器 和 一个片段着色器; 着色器示例代码:...将用 链接到程序对象的 顶点着色器、片段着色器进行; 设置视口和清除颜色缓冲区 设置视口 onDrawFrame()方法用于绘制帧; GLES30.glViewport ( 0, 0, mWidth,...mHeight ); 通知OpenGL ES 用于绘制的2D渲染表面的原点、宽度和高度; 在OpenGL ES 中, 视口(Viewport) 定义所有 OpenGL ES 渲染操作 最终显示的...2D矩形; 视口 由 原点坐标(x,y)和宽度、高度 定义; 清除颜色缓冲区 设置视口之后,需要清除屏幕; 在OpenGL ES中, 绘图中涉及多种缓冲区类型:颜色、深度、模板; HelloTriangle

    1.6K10

    GPU渲染之OpenGL的GPU管线

    首先,将由应用阶段加载到显存中的顶点数据(由drawCall指定后)作为输入传递给顶点着色器。...接着,顶点着色器首先对图元的每个顶点设置模型视图变换及投影变换(即右乘MVP矩阵),然后将变换后的顶点按照摄像机视椎体定义(即透视投影,或正投影)进行裁剪,将不在视野内的顶点去掉并剔除某些三角面片。...所以一般在x轴,y轴超出屏幕(由glViewPort定义)的部分,这些顶点在视口变换的时候被更高效的直接丢弃,无须产生新图元。...视椎体在OpenGL中可以通过gluPerspective来定义对应的大小结构,在Cocos2dx引擎中,Director类的setProjection方法就定义了cocos的渲染用到的视椎体,大家可以阅读对应的代码了解学习下...经过视椎体裁剪后的顶点坐标经过透视分离(指由硬件做透视除法),得到范围是[0,1]的归一化的设备坐标,最后映射到屏幕或者视口上。

    3.1K32

    7个实用的CSS技巧

    :where() 伪类函数接受一个选择器列表作为其参数,并将选择所有可以由选择器列表中的任何规则选择的元素。...例如,如果你在“文字打字效果”后面写了另一个词,除非你改变CSS片段中的 steps() 数量,否则动画将无法工作。 也就是说,这种效果并不是特别新颖。...一些使用场景包括能够比较两张不同的照片,而无需在视口中渲染这些照片。例如,可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的 div元素上,所以它不会干扰到元素之外的其他元素。...纯CSS的清单 正如我在文章开头提到的,CSS正在稳步发展。而这个动态清单的演示就是一个很好的例证。 它的工作方式是我们将复选框输入类型与 :checked 伪类一起使用。...并使用 transform 属性在 :checked 规范返回真值时更改状态。 使用这种方法可以实现各种各样的目标。例如,当用户点击特定的复选框时,切换隐藏的内容。

    17730

    使用chrome调试CSS

    ,样式在右侧 styles 选项卡区域内。...2、其中继承的属性是不透明的。选中 Show All 复选框可以查看所有继承的值。 3、注意属性的显示是按照字母顺序排列的。 4、Filter 过滤器可以按照查询规则搜索符合规则的样式。...以 :hover 为例,选中 :hover 复选框,如果 被检查的元素添加了 :hover 样式,在样式列表中就会显示此条样式。并且页面效果不用鼠标悬浮也会触发显示效果。...切换样式声明 1、点击样式声明前的复选框就可以切换样式声明 更改元素尺寸 1、在 styles 选项卡的框模型图中,将鼠标悬浮在需要编辑的区域,双击,填入需要修改的数值,回车。...要将所选颜色更改为页面上的其他颜色: 1、将鼠标悬停在视口中的目标颜色上。 2、点击确认。

    5.5K20

    用 Windows Media Center 免费看大片 (二)

    此时,会弹出“免费观看互联网视频”服务的安装界面: 如果对用户协议无异议,勾选复选框,并点击“安装”按钮: 视网络速度不同,安装过程可能会持续几分钟,整个安装过程分为下载和安装两个步骤,其中,下载的安装文件大约为...”,“位置”选项卡中的“当前位置”设置为“中国”: 最后,点击“管理”选项卡,点击“复制设置”按钮: 在新弹出的窗口中,勾选下图中所示的“欢迎屏幕和系统账户”,点击“确定”按钮: 最后,单击“区域和语言...接下来,再次在 Windows Media Center 中点击视频: 此时,就顺利进入了相关内容提供商的视频列表: 点击视频播放即可。...也可以重新选择分类,上图中是使用了 CRJ.cn,目前还提供服务的有新浪和搜狐。...,要求安装×××: 勾选协议复选框,并且点击“更新”按钮即可: 接着,会是一个下载并自动安装的过程,同样无需用户干预,文件很小,整个过程速度很快: 安装结束后,即可正常播放。

    2.6K20

    学习|Unity3d的导航实现循环线路移动

    上图中三辆汽车会沿着道路一直不停地行驶,实现永动的状态,我们就来看看达到上面的效果是怎么实现的。 实现思路 1. 把道路设置实现自动导航的效果 2. 设置行驶的路线点,生成一个行驶路线 3....根据车辆当前位置计算初始要到的路线 4. 开始行驶 具体实现方法 ? 微卡智享 01 设置导航路线 ? 我们把道路的预制模型在视口中先摆放起来,完成我们道路的搭建。 ?...本身我们建模的道路就是建了一个环形的道理,所以我们想到实现路线,可以考虑在我们的道路上设置行驶的顺序点,生成一个列表,每当达到一个点后我们就再往列表中的下一个点进行行驶,当我们运行到列表点终点后,下一个点就是列表的起点...如上图中,我们把道路上四个直行的道路模型,按照车运行的顺时针方向标出了0-3的顺序记号,并且在右边把这四个模型也改了相应的名称加后面的序号,下面我们就开始在代码中开始实现。...需要注意 设置运行线路的脚本挂载到我们的车辆上,当程序运行时,找到当前的车的坐标离设置的路线中坐标最近的为初始目标点,判断这个初始目标点需要注意的是,首先要判断车辆运行方向内最近的,如果行驶的点在车的后方

    2.3K42

    分享15个有用的,你可能还不知道的CSS小技巧,建议每个前端开发者都了解下

    通过使用calc()函数,你可以在CSS中进行动态计算,将不同单位的值进行相加、相减、相乘或相除。这对于创建响应式设计非常有用,因为你可以根据不同的视口尺寸或元素大小自动调整样式。...这对于给列表的第一个和最后一个项目添加特定样式,或者为导航菜单的第一个和最后一个链接添加特殊效果非常方便。...由于浏览器之间的不一致性,自定义复选框和单选框输入的外观可能会具有一定的挑战性。...JavaScript的情况下创建滚动效果 通过使用:target伪类,你可以在元素成为当前URL片段标识符(“#”后面的部分)的目标时对其进行样式设置。...使用:target伪类,你可以根据URL的片段标识符来选择并样式化特定的元素。当用户点击包含片段标识符的链接时,浏览器会自动滚动到对应的元素,并应用:target伪类所定义的样式。

    21340

    本地存储应用案例 ToDoList

    2、toDoList 分析 刷新页面不会丢失数据,因此需要用到本地存储 localStorage 核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据...saveData(data);        // 重新渲染页面        load(); ​   }) 6、正在进行和已完成选项操作 当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 如果当前数据的done...(data, function (i, n) {            // 如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面            if (n.done...为false, 则是待办事项,就把列表渲染加载到 ol 里面                // 给链接自定义属性记录当前的索引号 id                $("ol").prepend

    2.4K20

    unity3d新手入门必备教程

    创建资源在控制栏中使用创建下拉列表 (Create Drop-down)来创建你需要的物体。此外你还可以使用 Control+单击或右键在工程视图中单击打开相同的下拉列表。    ...创建下拉列表    组织工程视图    使用创建下拉列表在工程视图中创建文件夹。然后你可以重命名并使用该文件夹就像在 Finder中一样,并可以在工程视图中将任何资源拖动到文件夹中。...你也可以在导入的时候启用纹理压缩着可以在 Unity->Preferences菜单中设置。    选中脚本调试 (Strip Debug Symbols)复选框将移出在发布中出现的调试信息。...这将减小发布文件的大小并可以实现优化的目的。Alpha或 betas版应该禁用这个选项已达到调试的目的。在昀后发布 release版的时候你应该选中该复选框。    ...点(Point):一个从它的位置向所有方向发光的光源,将影响位于它的范围内的所有物体。    ?

    6.4K10

    Vimeo的转码设施升级之旅

    点击上方“LiveVideoStack”关注我们 ▲扫描图中二维码或点击阅读原文▲ 了解音视频技术大会更多信息   //   编者按:随着Google Cloud等基础设施更加成熟,通过使用更加廉价的竞价实例...实现并行化和分布式转码 并行化与分布式转码的本质,就是把视频拆分成一个个更小的片段,分别在我们的服务器上进行转码。在完成所有转码之后,再把各片段组合起来以创建最终输出(参见图一)。...如果音频只需要被提取和存储一次(而非与视频混合或合并),那我们的打包压力就会小得多,也能节约存储成本。(传统上,音频和视频会被存储在同一文件内,导致不同视频质量或还原度版本中都要单独保存一份音频。)...Profile集的确切列表视具体用例而定。例如,并非所有视频都可使用AV1格式。 步骤2 我们的视频API会执行一系列检查,包括获取视频源位置、要求Falkor API运行分析作业等。...该作业会根据各片段的标题头生成视频标题头,例如moov和SIDX,再将此标题头与所有片段连接起来,最后将合并完成的视频存储在目标位置。

    1K50

    NDK OpenGLES3.0 开发(十):深度测试

    如果此测试通过,深度缓冲内的值可以被设为新的深度值;如果深度测试失败,则丢弃该片段。 深度测试是在片段着色器运行之后(并且在模板测试运行之后)在屏幕空间中执行的。...与屏幕空间坐标相关的视区是由 OpenGL 的视口设置函数 glViewport 函数给定,并且可以通过片段着色器中内置的 gl_FragCoord 变量访问。...gl_FragCoord 的 X 和 y 表示该片段的屏幕空间坐标 ((0,0) 在左下角),其取值范围由 glViewport 函数决定,屏幕空间坐标原点位于左下角。...深度缓冲区的可视化 从图中可以观察到,靠近屏幕的物体颜色更黑(深度值更小),远离屏幕的物体颜色更白(深度值更大)。...不启用深度测试 开启深度测试后,如果片段通过深度测试,OpenGL 自动在深度缓冲区存储片段的 gl_FragCoord.z 值,如果深度测试失败,那么相应地丢弃该片段。

    1K30

    Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点

    例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。 或者,在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态: 元素完全隐藏并从文档流中删除。...只有当视口宽度大于400px时,才会显示该图。我向元素添加了hidden`属性。 在CSS中,我使用hidden属性仅在所需的视口大小中显示元素。...除此之外,opacity值为1以外的元素将创建一个新的堆叠上下文。 image.png 在上图中,蓝皮书仅在视觉上隐藏。...在我们的例子中,导航列表在那里,而它在视觉上是隐藏的。...自定义复选框 image.png 默认的复选框设计很难自定义,因此,我们需要为复选框创建自定义设计。

    5.1K30

    toDoList案例分析

    核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据 3....)方法 5.存储修改后的数据,然后存储给本地存储 6.重新渲染加载数据列表 7.因为a是动态创建的,我们使用on方法绑定事件 1.6 案例:toDoList 正在进行和已完成选项操作 1.当我们点击了小的复选框...3.修改对应数据属性 done 为当前复选框的checked状态。...4.之后保存数据到本地存储 5.重新渲染加载数据列表 6.load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 7.如果当前数据的...done 为false, 则是待办事项,就把列表渲染加载到 ol 里面 1.7 案例:toDoList 统计正在进行个数和已经完成个数 1.在我们load 函数里面操作 2.声明2个变量 :todoCount

    1.3K30

    哪些你知道或不知道的css,在这里或许都齐全 css编码技巧 css小技巧

    效果图如上所示: 解决方案:css渐变和背景的扩展,在背景图之上在加一层纯色实色背景,给两层背景指定不同的background-clip; 渐变是可以和背景图片一起使用的,而且背景图片的预发和平时的写法是一样的...cubic-bezier()函数,允许我们指定自定义调速函数;cubic-bezier(x1,y1,x2,y2);(x1,y1)表示第一个-P1控制锚点的坐标,(x2,y2),表示第二个-P2;曲线的片段分别固定在...自定义复选框 我们对于美得追求是永无止境的,但是复选框,单选框的样式的样式总是不如我们如意。虽然js能够实现效果,但是代码停臃肿。那我们有什么去实现呢?...解决方案::checked伪类,这个伪类只有在复选框被勾选时才会匹配,不论是由用户交互触发,还是有脚本触发 当 元素与复选框关联之后,可以起到触发开关的作用 label 不是复选框那样的替换元素...,我们可以为他添加生成性内容(伪元素),并基于复选框的状态来为其设置样式,然后把真正的复选框隐藏起来(但不能把它从tab键切换焦点的队列中完全删除),再生成性内容美化一番,用来顶替原来的复选框!

    1.7K10

    哪些你知道或不知道的css,在这里或许都齐全

    使用百分比长度来取代固定长度,或者使用与视口相关的单位(vw,vh,vmin,vmax),她们的值解析为视口宽度或高度的百分比 当你需要在较大分辨率下得到固定宽度, 使用max-width代替...效果图如上所示: 解决方案:css渐变和背景的扩展,在背景图之上在加一层纯色实色背景,给两层背景指定不同的background-clip; 渐变是可以和背景图片一起使用的,而且背景图片的预发和平时的写法是一样的...,(x2,y2),表示第二个-P2;曲线的片段分别固定在(0,0)-P0起点,(1,1)-P4终点; 我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值范围是 0 到 1,当取值超出范围时...解决方案::checked伪类,这个伪类只有在复选框被勾选时才会匹配,不论是由用户交互触发,还是有脚本触发 当 元素与复选框关联之后,可以起到触发开关的作用 label 不是复选框那样的替换元素...,我们可以为他添加生成性内容(伪元素),并基于复选框的状态来为其设置样式,然后把真正的复选框隐藏起来(但不能把它从tab键切换焦点的队列中完全删除),再生成性内容美化一番,用来顶替原来的复选框!

    1.4K20

    PCS7+(WINCC)数据归档与备份

    在本初子午线以东,将根据相应的距离对在格林尼治处测得的世界时间加一小时或几小时。在本初子午线以西,将减去相应的小时数。UTC + (+0800) = 本地(北京)时间 (1)。...例如下图中,最下面的两个数据片段,后缀 .ldf 的是日志文件,后缀 .mdf 的是数据文件,开始的时间是201709130648+8 小时=201709131448,即 9 月 13 日下午 2 点...,但格式不同的文件,两个文件必须一起存在同一个文件夹,才能被归档有效识别,如果只有其中一个文件,则数据无效,无法看到相应时间段内的趋势曲线、报警信息、操作记录等。...在 WINCC 仍然激活期间,如果数据片段的大小尚未达到设置值或系统时间未到达设置的分段时间,则该文件不会生成结束标志。 步骤 2....报警消息中会有同步开始 、同步结束的相关信息提示,在总的报警信息 general list 中查看,而同步的时间则视项目归档的数据量而定。

    4.9K22

    第3章 WEB03- JS篇-视频教程-第二部分

    11-案例三:JS控制表格隔行换色的总结第一行不换色 12-案例四:JS控制复选框的全选和全不选-需求和分析 13-案例四:JS控制复选框的全选和全不选-代码实现 14-案例四:JS控制复选框的全选和全不选...将HTML文档装载到内存,将HTML文档形成一个DOM的树形结构....Document:文档对象.代表的是加载到内存中的整个的文档 方法: document.getElementById(“”); document.getElementsByName(“”); document.getElementsByTagName...Document,Element,Attribute统称为Node(节点) 1.6 JS控制二级联动: 1.6.1 需求: 在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份...1.7 JS控制下拉列表左右选择: 1.7.1 需求: 有两个列表,需要将左侧列表中的数据添加到右侧的列表中: 1.7.2 分析: 1.7.2.1 步骤分析: 单击事件: 编写函数:获得左侧的下拉列表

    3K20

    3D图形渲染管线

    视变换: 从世界空间位置到眼空间位置的变换时视变换。典型的视变换结合了一个平移把眼睛在世界空间的位置移到眼空间的原点,然后适当地旋转眼睛。通过这样做,视变换定义了视点的位置和方向。...我们通常把分别代表建模和视变换的两个矩阵结合在一起,组成一个单独的被称为modelview的矩阵。你可以通过简单地用建模矩阵乘以视矩阵把它们结合在一起。...另一个被称为深度范围变换的变换,缩放顶点的z值到在深度缓冲中使用的深度缓存的范围内。...在本图中,两个三角形被光栅化了。整个过程从顶点的变换和着色开始。下一步,图元装配解读那从顶点创建三角形,如虚线所示。之后,光栅用片段填充三角形。最后,从顶点得到的值被用来插值,然后用于贴图和着色。...注意仅仅从几个顶点就产生了许多片段。 ? 图6:形象化图形流水线 ---- 可编程图形流水线 当今图形硬件设计上最明显的趋势是在图形处理器内提供更多的可编程性。

    1.8K20
    领券