端到端测试 1.1 区别 在 jest 单元测试中使用快照、API-mock 和 DOM 样式状态断言已经能够实现基础的 UI 测试，但是单元测试属于白盒测试，更关注数据的流动，而端到端测试(End To...就像官网所说，Cypress就像一个完整的烘烤箱，他还自带电池，下面是一些其它测试框架无法做到的事情： 时间旅行： Cypress在你运行测试的时候拍摄快照。...supportFile: 'tests/e2e/support/index.js', // 配置自定义命令全局注入 viewportHeight: 768, // 测试浏览器视口高度 viewportWidth...: 1366 // 测试浏览器视口宽度 然后，可以将命令写到 package.json 中，如果使用 vue-cli，可以看到已经存在 "test:e2e": "vue-cli-service test...截屏和视频录制 屏幕录制截屏是 Cypress 的一大特色，在 Test Runner 中单击项目的 Runs 选项卡，登录账号，再根据提示执行指令，即可完成屏幕录制和自动截屏。 $ .
一、简介 Cypress是新一代前端测试框架，它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。 ...【视图快照和视频】从命令行运行测试时，我们可以查看失败用例的视图快照和整个测试过程的视频。...image 3） 窗口设置： ① 默认情况下，除非由cy.viewport命令指定，否则视口将为1000*660px ?...image ② 我们可以通过在cypress.json中指定这些值来覆盖默认视口维度 { “viewportWidth”：1200， “viewportHeight”：800 } 我们可以通过以下定位：...跟webdriver一样，需要自己去定位元素，工具定位的都不太准。所以要对css的元素选择要熟悉一点，对mocha框架熟悉，对JS熟悉。
CSS&HTML面经专题——移动端响应式布局 1、Viewport视口 在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。...在viewport中有两种视口，分别表示为： visual viewport（视觉视口）：浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页，从而改变视觉视口。...视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同，在上面。 layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。...也就是说，在不设置网页viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。...（2）概念 根据屏幕大小变化，页面的内容排版布局会自动调整变动，已呈现更好的用户体验。 5、rem,em,px的区别是什么？ px 绝对单位，页面按精确像素展示。
如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。 如下所示： ?...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。...当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见，屏幕都将是视口的高度。...此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大（greatness），但考虑到它在移动设备上的局限性，最好避免使用它。
以下是详细的描述以及它们之间的区别：1. px（像素）：像素是屏幕上的最小单位，通常代表一个物理像素。px是绝对单位，其尺寸在不同设备上保持不变，这意味着1px在高密度屏幕和低密度屏幕上看起来不同。...px通常用于精确控制图像的大小和布局，特别是在需要保持一致性的设计中。2. em：em是相对单位，其值是相对于元素的父元素的字体大小而言。...em常用于调整文本大小、行高和间距，特别是在需要嵌套元素的情况下，可以实现相对尺寸。3. rem：rem也是相对单位，但是相对于文档根元素的字体大小。...百分比常用于调整尺寸、布局和位置，特别是在创建自适应和响应式设计时非常有用。5. vh（视口高度）和vw（视口宽度）：vh和vw是相对于视口的高度和宽度的单位。...1vh等于视口高度的1%，1vw等于视口宽度的1%。这些单位非常适合响应式设计，因为它们让元素根据屏幕大小自动调整大小。6. pt（点）：pt是用于印刷和排版的单位，等于1/72英寸。
就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。...需要注意的是视口的单位是CSS像素，而非物理像素 如下图 通过查看html的尺寸即可知道视口的尺寸 如图在浏览器大小没有发生改变，没有进行缩放时此时html/视口的尺寸为 1280x116...这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口（理想视口） 默认情况下 移动端的像素比为...我们可以通过改变视口的大小来改变CSS像素和物理像素的比值 如Iphone6 的物理像素是750px这个是固定的，我们要调整像素比，只需将视口调小就可以了如 375，此时正好是1：2 通过meta设置视口大小....vh：1vh等于视口高度的1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为 375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度
） 空间竞争 由于所有元素根据屏幕实际宽度进行 等比缩放 ，故对屏幕“剩余空间”的利用是静态的，即当屏幕宽高比变化时，所有元素总是 同时 “占据”或者“让出”特定比例的空间，尤其是在空间紧凑的情况下，可能存在非重点内容元素...2.1.3、实际视口中的元素缩放行为 当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小； 当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。...若元素在水平或垂直方向上，并不吸附于任意一条边，则令其相对于该方向上的两条边的距离比例固定；比如若元素同时不吸附于视口左边和右边，则元素相对于视口左边和右边的距离之比固定，值为在页面设计器中，配置页面时该元素距离视口左边和右边的距离之比...2.2、缩放比 scale 使用 scale 描述元素在实际视口与标准视口下的缩放比，设元素在基准视口下的宽高为 width 和 height ，则元素在实际视口下的宽高分别为 baseW * scale...不低于 基准视口时，元素缩放比为 1，元素大小保持不变。
通常来说分辨率越高的屏幕 DPI也就越高，所以高分辨率屏幕显示的图标和字体都要更小一些。 所有浏览器的默认字体大小都是 16px。...px的特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE...所以默认情况下 1em=16px EM特点 em的值并不是固定的； em会继承父级元素的字体大小。 3、rem rem和 em相似，但是 rem是相对于根元素的字体大小单位。...其长度单位： vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 参考...： 字体大小之px、em、rem、pt,字号详解：https://www.cnblogs.com/zhaowy/p/8400271.html vw vh视口百分比：https://blog.csdn.net
如前所述，我们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定情况下使用。...如果我们按比例制作不同的图片，这种方法就能奏效。这允许浏览器根据屏幕的像素密度和视口大小来决定下载哪个版本。...它可能会导致将高分辨率的大图像提供给非常小的屏幕，这是我们不希望看到的。...vw：相对于视口的宽度 vh：相对于视口的高度 rem:相对于根元素()(默认字体大小通常为16px) em:相对于父元素 %：相对于父元素 同样，大多数浏览器的默认字体大小为16px，这是...vh是视口高度或可见屏幕高度的首字母缩写。 100vh代表视口高度的100％（取决于设备）。 同样，vw代表视口宽度，这意味着设备的可视屏幕宽度，而100vw则代表视口宽度的100％。
改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 ...在这种布局方式下，当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现滚动条。而且当需求改变时，可能会改动多套代码。 ...自适应对页面的屏幕适配实在一定的范围，比如：pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 < 768px; 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口，而不是为每个终端做一个特定的版本...相同点： 都是通过检测视口分辨率，使页面适应不同分辨率的视口。...弹性布局（rem/em布局） 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示
它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。 在移动设备上，由于屏幕较小，需要 对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口 通常比 桌面浏览器中的布局视口 小，因为 移动设备屏幕的大小通常比桌面屏幕小。...为了 使网页在 不同设备上 都能够 正确地显示和布局，开发者可以使用 响应式设计来根据设备的不同调整布局视口。..., 压缩到手机屏幕宽度 , 网页中的元素被缩小了 , 用户只能通过手指缩放查看网页内容 ; 2、视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 视觉视口 - Visual Viewport...理想视口的大小 取决于 网页的内容和布局，通常应该 与布局视口的大小相同 。 通过设置理想视口，可以 使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。
viewport（视口） ###3个视口### layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。...ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...因此，这个元素不一定会跨越200个设备物理像素。例如：在苹果的视网膜屏幕上，视网膜屏幕的像素密度是普通屏幕的两倍，那么这个元素就跨越了400个设备物理像素。...手机浏览器是把页面放在一个虚拟的”视口”（viewport）中，视口可大于或小于手机屏幕的可视区域，一般手机默认viewport大于可视区域。...我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局 ###调整html元素大小的值### 有css与js两种方式 css方式： html { font-size:
如前面 viewport 概念的解释，css 中同样 px 大小的宽高描述，在不同大小的视口状态下，用户在浏览器窗口中看到的页面大小的效果是不同的。...（device-width 对应数值在竖屏模式下为 375，横屏模式下为 667） 既然，两个属性的作用都是设置初始视口大小，那同时设置且存在冲突的情况下，浏览器会怎么处理呢？...其布局特点简单粗暴，就是根据屏幕宽度整个页面等比缩放。 6.2.2 技术方案 - rem rem 是 CSS3 新增的相对于根元素 html 的 font-size 计算值的大小的倍数单位。...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变...我们在移动端视口要想视觉效果和体验好，那么我们的视口宽度必去无限接近理想视口 理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示...那么所谓的理想宽度就是浏览器（屏幕）的宽度了。 于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。...所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应， 如此我们只需要给设计稿的px转换成对应的rem单位即可 当然，
使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小，并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。...快速预览媒体查询 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 元素面板（Elements）...由于每一条消息的时间戳均不同，因此，每一条消息都将显示在各自的行上 ? 选择执行环境 以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector ?...源代码面板（Sources） 在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器 格式化混淆代码 在某些情况下，我们需要对混淆的代码做一定的调试...（可选）如果除了未捕获的异常外，还想暂停捕获的异常，请选中 “Pause on caught exceptions” 复选框。 ?
支持通过 URL 或本地文件路径来指定要转换的 HTML 输入。 可以获取执行 JavaScript 后页面中生成的内容。 提供了多种配置选项，如设置视口大小、延迟加载等功能。...同时，它还提供了丰富而灵活的配置选项，使用户能够根据自己需求对输出结果进行调整和优化。...它可以通过命令行生成网页界面的屏幕截图，并提供方便的报告查看器来处理结果。支持 Linux 和 macOS，Windows 也基本可用。...能够模拟设备环境，在不同设备上获取对应样式效果的截图； 支持全页面滚动截取整个长页面； 允许隐藏或移除指定CSS选择器匹配到的DOM元素； 提供点击指定DOM元素、滚动至某个位置等交互行为支持； 总之，...无论您需要在测试过程中生成网页快照还是在爬虫任务中抓取数据时获取相关信息，这个项目都能派得上用场。
容器查询 在 @container 之前，网页的元素只能响应整个视口的大小。这对于大型布局非常有用，但对于外部容器不是整个视口的小型布局，布局不可能进行相应调整。...这种引导式焦点策略被称为焦点捕获，因为开发人员会将焦点置于交互空间中，监听焦点更改事件，如果焦点离开交互空间，则强制返回。使用键盘或屏幕阅读器的用户会被引导回到互动空间，以确保在继续完成之前的任务。...但是当该条滑出时，视口高度发生了变化，任何 vh 单位都会随着目标大小的变化而移动和调整大小。...使用 @scope，无需命名约定即可在不标记header元素的情况下完成相同的目标： .card__header { color: var(--text); } /* with @scope becomes...根据访问视口的大小，可以在页面加载上节省更多资源。当用户与媒体滚动条交互时，继续保存。这些图像上都有load="lazy"属性，再加上CSS完全隐藏元素，这意味着永远不会对图像发出网络请求。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
