开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将句柄用于条件CSS

是一种在前端开发中常用的技术，它可以根据特定的条件来动态地应用不同的CSS样式。通过使用句柄，我们可以根据用户的设备、浏览器、操作系统、屏幕尺寸等条件来选择性地加载不同的CSS样式，以提供更好的用户体验和适应不同的环境。

句柄（也称为媒体查询）是一种CSS功能，它允许开发人员根据不同的条件来应用不同的样式。句柄可以通过使用@media规则来定义，并且可以在CSS文件中的任何位置使用。

以下是一些常见的条件CSS句柄及其应用场景：

@media screen：用于针对屏幕设备的样式。可以根据屏幕尺寸、分辨率等条件来应用不同的样式。例如，可以使用@media screen and (max-width: 768px)来定义在小屏幕设备上显示的样式。
@media print：用于打印样式。可以定义在打印页面时应用的样式，以确保打印输出的内容具有良好的可读性和格式。例如，可以使用@media print来定义在打印时隐藏某些元素或调整页面布局。
@media (min-width: 1024px) and (orientation: landscape)：用于根据设备的屏幕尺寸和方向应用样式。可以根据设备的横向或纵向方向以及屏幕尺寸来应用不同的样式。例如，可以使用@media (min-width: 1024px) and (orientation: landscape)来定义在大屏幕横向显示时应用的样式。
@media (hover: hover)：用于根据设备是否支持鼠标悬停来应用样式。可以根据设备是否支持鼠标悬停来应用不同的样式。例如，可以使用@media (hover: hover)来定义在支持鼠标悬停的设备上应用的样式。
@media (pointer: coarse)：用于根据设备的指针类型（如触摸屏幕）来应用样式。可以根据设备的指针类型来应用不同的样式。例如，可以使用@media (pointer: coarse)来定义在触摸屏设备上应用的样式。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS CDN：https://cloud.tencent.com/product/css-cdn
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动推送：https://cloud.tencent.com/product/umeng
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/product/mu

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端性能优化-雅虎军规35条

合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。

05

python 爬虫之selenium可视化爬虫

包含了测试的录制（selenium IDE）,编写及运行（Selenium Remote Control）和测试的并行处理（Selenium Grid）。

06

听GPT 讲Rust源代码--src/tools(21)

在Rust的源代码中，rust/src/tools/miri/src/shims/x86/mod.rs文件的作用是为对x86平台的处理提供支持。它包含一些用于模拟硬件操作的shim函数和相关的类型定义。

01

selenium常用webdriver api汇总

1.driver.current_url：用于获得当前页面的URL 2.driver.title：用于获取当前页面的标题 3.driver.page_source:用于获取页面html源代码 4.driver.current_window_handle:用于获取当前窗口句柄 5.driver.window_handles:用于获取所有窗口句柄 6.driver.find_element_by***** 定位元素，有18种 7.driver.get(url):浏览器加载url。 8.driver.forward()：浏览器向前（点击向前按钮）。 9.driver.back()：浏览器向后（点击向后按钮）。 10.driver.refresh()：浏览器刷新（点击刷新按钮）。 11driver.close()：关闭当前窗口，或最后打开的窗口。 12.driver.quit():关闭所有关联窗口，并且安全关闭session。 13.driver.maximize_window():最大化浏览器窗口。 14.driver.set_window_size(宽，高)：设置浏览器窗口大小。 15.driver.get_window_size()：获取当前窗口的长和宽。 16.driver.get_window_position()：获取当前窗口坐标。 17.driver.get_screenshot_as_file(filename):截取当前窗口。 18.driver.implicitly_wait(秒)：隐式等待，通过一定的时长等待页面上某一元素加载完成。若提前定位到元素，则继续执行。若超过时间未加载出，则抛出NoSuchElementException异常。 19.driver.switch_to_frame(id或name属性值)：切换到新表单(同一窗口)。若无id或属性值，可先通过xpath定位到iframe，再将值传给switch_to_frame() driver.switch_to.frame(id或name,或定位到的frame) 20.driver.switch_to.parent_content():跳出当前一级表单。该方法默认对应于离它最近的switch_to.frame()方法。 21.driver.switch_to.default_content():跳回最外层的页面。 22.driver.switch_to_window(窗口句柄)：切换到新窗口。 23.driver.switch_to.window(窗口句柄):切换到新窗口。 24.driver.switch_to_alert():警告框处理。处理JavaScript所生成的alert,confirm,prompt. 25.driver.switch_to.alert():警告框处理。 26.driver.execute_script(js):调用js。 27.driver.get_cookies():获取当前会话所有cookie信息。 28.driver.get_cookie(cookie_name)：返回字典的key为“cookie_name”的cookie信息。 29.driver.add_cookie(cookie_dict):添加cookie。“cookie_dict”指字典对象，必须有name和value值。 30.driver.delete_cookie(name,optionsString):删除cookie信息。 31.driver.delete_all_cookies():删除所有cookie信息。

03

高性能JavaScript

原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员。因为局部变量位于作用域链的第一个对象中，全局变量位于作用域链的最后一环。变量在作用域链的位置越深，访问的时间就越长。

01

当selenium爬虫遇到弹窗——iframe定位

如上图所示，为某数据网站，自动登录时，点击登录button会出现弹窗让你输入账号密码，此时定位输入框send_keys发送参数，报错信息如下：找不到元素（定位条件确认没写错）

01

【软件测试】自动化测试selenium(二)

我们可以看到,submit和click的效果是一样的,但是submit存在一定的弊端: 如果点击的元素放在form标签中,此时使用submit实现的效果和click是一样的.如果点击的元素放在非form标签中,此时使用submit会报错! 如下:(此时submit操作的不是from标签下的元素)

03

Selenium Webdriver常用方法

目录[-] 实例化方法 from selenium import webdriver driver = webdriver.Chrome(executable_path='C:\Program Files (x86)\Google\Chrome\Application\chromedriver') 浏览器操作浏览器最大化 driver.maximize_window() 设置浏览器宽高 driver.set_window_size(480, 800) 控制浏览器前进后退 driver.back()

08

常见的兼容性问题

浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。

01

addEventListener() 方法

提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

01

selenium的使用（有点意思）

安装配置很简单，只需要下载对应的版本后将chromedriver.exe文件复制python路径下的Scripts路径下即可。

02

Selenium自动化工具集 - 完整指南和使用教程

Selenium 是一个用于自动化浏览器操作的工具集。它通过模拟用户在浏览器中的行为，如点击、输入、表单提交等，来实现自动化测试和网页数据抓取等功能。Selenium 针对不同的浏览器提供了不同的 WebDriver 接口，如 ChromeDriver、GeckoDriver（Firefox）、WebDriver（Safari）等。

01

nginx的优化及性能测试

1.nginx的优化全局配置优化：修改系统ulimit限制/etc/security/limits.conf

05

RCurl中这么多get函数，是不是一直傻傻分不清！！！

你想知道R语言中的RCurl包中一共有几个get开头的函数嘛，今天我特意数了一下，大约有十四五个那么多（保守估计）！所以如果对这个包了解不太深入的话，遇到复杂的数据爬取需求，自然是摸不着头脑，心碎一地~_~ 实际上很多我们都不常用，常用的不超过五个，而且这些函数命名都很有规律，一般是类似功能的名称中都有统一的关键词标识，只要理解这些关键词，很好区分，下面我对9个可能用到的get函数简要做一个分类。第一类是get请求函数（参数直接写在URL里面） getURL #get请求的一般

05

网站性能优化

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。　　减少页面组件的方法其实就是简化页面设计。

04

Yahoo!网站性能最佳体验的34条黄金守则(转载)

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。 CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！

01

Clamp()、Max() 和 Min() CSS 函数的用例

英文 | https://ishadeed.com/article/use-cases-css-comparison-functions/

02

selenium最大化浏览器-Web UI自动化测试之Selenium工具篇

注意：3.0 版本下所有浏览器除了需要安装框架以外，还需要安装对应的驱动程序

02

从Webkit内部渲染机制出发，谈网站渲染性能优化

本文由 jerryOnlyZRJ 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。本文是对前文：网站性能优化实战——从12.67s到1.06s的故事相关知识的补充，文中的“前文”一词同此。特以此文向《WebKit技术内幕》作者朱永盛前辈致敬。 0.引言自上次发布了《网站性能优化实战——从12.67s到1.06s的故事》一文后，发现自己对页面渲染性能这个版块介绍的内容还不够完善，为了更清晰的梳理浏览器渲染页面的机制，以让读者更为全面了解渲染性能优化的深

01

浏览器事件

常用浏览器事件与DOM事件，包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。

02

Nginx参数配置说明

#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; #工作模式及连接数上限 events { #epoll是多路复用IO(I/O Multiplex

【服务器】Nginx文件配置

Nginx配置解释： nginx.conf文件 #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; #工作模式及连接数上限 events { #ep

06

适用于小团队的前端规范示例

适用于前端开发团队规范为参考规范，不全是硬性要求，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够获得沉淀，减少重复劳动。

02

万字启程——零基础~前端工程师_养成之路001篇

前端即网站前台部分，运行PC在端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

01

深入理解JavaScript与DOM

DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体，因为Javascript通常都是用来进行DOM操作和交互的。

03

几款国产开源的Windows界面库

上次介绍的几款图形界面库http://blog.okbase.net/vchelp/archive/23.html都是国外的开源项目，今天介绍的几款都是国人的开源项目，大部分是采用DirectUI设计思想。

05

JavaScript 学习-29.HTML DOM 事件

前言 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。常用的一些事件事件名称作用 onload 通常用于元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 onunload 用户退出页面。( 和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 ondblclick 当用户双击某个对象时调用的事件句柄。 onkeydown 某个键盘按键被按下。

01

ELEMENT顶部导航栏固定

使用addEventListener() 方法，进行事件监听，用于向指定元素添加事件句柄。

03

网站性能优化实战（二）

本文是对前文：http://imweb.io/topic/5b6fd3c13cb5a02f33c013bd 相关知识的补充，文中的“前文”一词同此。

02

以此为起跑，向nginx前进

nginx有两种使用场景，负载均衡和http服务器，本文以一个php项目配置为实例，来解释nginx作为http服务器的最常用配置，关于nginx在负载均衡场景的使用，请参照另一篇《Nginx 负载均衡实现解读》。

03

Selenium

自动化测试指软件测试的自动化，在预设状态下运行应用程序或者系统，预设条件包括正常和异常，最后评估运行结果。将人为驱动的测试行为转化为机器执行的过程。

01

Google V8引擎

V8的前世今生 V8是JavaScript渲染引擎，第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。V8可以独立运行，也可以嵌入到C++应用程序中运行。随着Web技术的快速发展，JavaScript所要承担的工作也越来越多，早就超

05

Google V8 引擎

V8的前世今生 V8是JavaScript渲染引擎，第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。V8可以独立运行，也可以嵌入到C++应用程序中运行。随着Web技术的快速发展，JavaScript所要承担的工作也越来越多，早就超

06

nginx启动和配置

1.命令行参数 -c </path/to/config> 为 Nginx 指定一个配置文件，来代替缺省的。路径应为绝对路径 -t 不运行，而仅仅测试配置文件。nginx 将检查配置文件的语法的正确性，并尝试打开配置文件中所引用到的文件。 -v 显示 nginx 的版本。 -V 显示 nginx 的版本，编译器版本和配置参数。 2.启动，重启和关闭启动： nginx -c /xxxx/nginx/nginx.conf 关闭： ps -aux|grep nginx kill -9 nginx主进程号 3

05

Python+Selenium笔记（七）：WebDriver和WebElement

（一） WebDriver WebDriver提供许多用来与浏览器交互的功能和设置，通过WebDriver的功能和一些方法，来实现与浏览器窗口、警告、框架和弹出窗口的交互，它也提供了自动化操作浏览器导航栏、设置cookies、截屏等方便我们测试的特性。（二） WebDriver功能及方法功能/属性简单说明 current_url 获取当前页面的URL地址（driver.current_url）下面的都是以这种方式,driver指浏览器驱动实例。 wind

05

V8引擎

V8是JavaScript渲染引擎，第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。V8可以独立运行，也可以嵌入到C++应用程序中运行。

04

手把手教使用c#开发一个windows动态桌面程序使用视频作为桌面

感觉让自己的桌面动起来非常屌，使用其他的软件不是这收费就是下载不了，没法设置。首先看windows窗体查看工具spy++查看windows桌面如图我们需要把我们的窗体，我们只要将我们的窗体放在第二WorkerW下即可。

01

MYSQL 数据库结构优化

使表占用尽量少的磁盘空间。减少磁盘I/O次数及读取数据量是提升性能的基础原则。表越小，数据读写处理时则需要更少的内存，同时，小表的索引占用也相对小，索引处理也更加快速。

05

csdn自动签到

#csdn自动签到 csdn自动签到小程序一、python+selenium开发 by Tansty github地址： gitte地址： 1.登录页面（1）首先进入官网 <img src="ht

05

解读selenium webdriver

WebDriver可以像用户一样驱动原生浏览器，无论是在本地服务器还是在使用Selenium服务器的远程机器上，都标志着浏览器自动化的一个飞跃。

03

Appium系列|测试脚本实现 (五)

这节课我们会来介绍下WebView的操作，之前我们介绍的都是原生控件的操作，WebView和其他原生控件的操作有点差别，WebView里面包含的控件用之前的定位方式没办法直接定位到，需要借助其他工具来查看其里面具体控件的定位方式，然后通过xpath或css定位方式来进行WebView里面控件的定位。

06

JavaScript事件随想

最近想学习下web前端，原因是这样的，当前中国(公元2018年)的网络环境，表现形式基本是web+移动端，像微信的小程序只要写js应该就可以了，移动端的app很多也是以web的形式展示，应用程序内是html+css+js，不仅方便发布，而且做起来也快，写完页面样式，更新资源，就好了，类似热更

02

如何通过数据仓库实现湖仓一体数据分析？

随着云计算的普及和数据分析需求的扩大，数据湖+数据仓库的湖仓一体分析能力成为下一代数据分析系统的核心能力。相对于数据仓库，数据湖在成本、灵活性、多源数据分析等多方面，都有着非常明显的优势。IDC发布的十项2021年中国云计算市场趋势预测中，有三项和数据湖分析有关。可以预见，跨系统集成能力、数据控制能力和更加全面的数据驱动能力，将会是未来数据分析系统重要的竞争领域。

04

设备驱动程序通知应用程序的几种方法

摘要在目前流行的Windows操作系统中,设备驱动程序是操纵硬件的最底层软件接口。为了共享在设备驱动程序设计过程中的经验,给出设备驱动程序通知应用程序的5种方法,详细说明每种方法的原理和实现过程,并给出实现的部分核心代码。希望能够给设备驱动程序的设计者提供一些帮助。

02

Django之Ajax文件上传

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

01

听GPT 讲Rust源代码--library/std(9)

题图来自 Rust 101 — Everything you need to know about Rust[1]

01

网页 frame 与多窗口处理

<iframe src="1.html" id="hogwarts_id" name="hogwarts_name"></iframe>

02

技术分享 | 网页 frame 与多窗口处理

那么通过传入 id、name、index 以及 Selenium 的 WebElement 对象来切换 frame

02

彻底学会Selenium元素定位

最近收到不少初学UI自动化测试的小伙伴私信，对于元素的定位还是有些头疼，总是定位不到元素，以及不知道用哪种定位方式更好。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭