测试该知道的二三事：浅谈响应式网页设计

作者：博为峰来源：博为峰 2023/10/30 16:21:12

起因最近几天正巧在帮朋友的公司团队做质量保障体系的培训，在此...

起因

最近几天正巧在帮朋友的公司团队做质量保障体系的培训，在此期间与几个测试人员闲聊，正是其中的一件事让我对今天的话题提起了兴趣：朋友公司里的研发团队招了一个应届毕业生，做了半年之后接了某个web项目的其中一个拓展功能页的开发任务，原本想想熟悉业务也好一阵子了，应该没什么问题。谁成想提测的那天，测试团队用手机访问该web页面的时候直接惊呆了，页面的内容竟然无法适应手机的屏幕尺寸，导致用户需要水平滚动或缩放界面才可以看全页面上的内容。结果自然可想而知，该产品直接被打回重造了。

响应式网页设计

RWD，相信这个字眼对于广大的前端开发者来说早已是耳熟能详的了，它也就是我们今天要介绍的主角，响应式网页设计（ResponsiveWebDesign）。简单来说就是我们日常生活中会使用各类设备（手机、平板、笔记本电脑、台式电脑）来进行网页的浏览，那么RWD就是可以让网页能够根据设备的屏幕大小和特征来自动适应和呈现*佳的布局和样式的一种设计方法。其实不难想象，日常我们使用电脑或大屏设备在访问一些网站的时候有时页面布局和界面元素显示都挺正常，一旦切换到移动端或小屏设备上查看时，页面的布局可能会变得混乱，文字变得难以阅读，按钮变得难以点击。这种软件的用户体验可以说是十分的糟糕了，说的再严重一点，站在开发商的角度，你的用户就有可能因为软件界面布局的用户体验差而直接放弃你的产品。所以各自的web产品如何提供一个无论在什么设备上都能良好呈现和使用的用户体验的效果，自然就成了前端软件开发的重要考虑内容之一。同样的，作为一个测试人员，我们在进行日常的测试活动的过程中也一定会碰见各式各样的测试设备，这些设备的型号都是由产品或业务人员进行准确的数据收集而得到的。那么针对这样的一个测试业务状况，我们一定会展开对应的测试互动（兼容性测试）。而在此类的测试活动中，我们不得不提的另一个重要概念就是web产品中的RWD，接下来就说一说在RWD中一些开发熟知但测试却不一定知道的二三事。

媒体查询

在承载web页面的各类设备中，前端开发人员是可以利用CSS中的一种技术来取得设备的特征和属性的，而这种技术就叫做媒体查询。顾名思义，利用媒体查询我们的开发人员就可以获取设备的屏幕分辨率、设备类型、设备方向等特定的信息。正是利用这些特定的查询信息，开发人员就可以将它们进行组合，从而编写针对不同设备特征和属性的样式规则，以实现响应式网页设计和适应不同设备的布局和样式需求。接下来我用一段简易的html代码来为大家展示如何实现媒体查询： <!DOCTYPE html> < html < head < meta charset "UTF-8" < title Responsive Web Design Example </ title < style /* 媒体查询针对移动设备 */ @ media 414px /* 在屏幕宽度小于或等于414px时应用的样式 */ body background-color } } /* 媒体查询针对2K分辨率屏幕 */ @ media 2560px /* 在屏幕宽度大于或等于2560px时应用的样式 */ body background-color } } </ style </ head </ html （左右滑动查看完整代码）以上的代码就是在页面的标签<style>内针对设备的屏幕宽度进行判断，从而达到面向不同屏幕大小的设备时，可以有针对性的展示对应的背景颜色。当然真正的业务代码不会如此的简单，但作为测试你需要的就是掌握其中的实现原理，在日后接触到前端产品代码的时候知道如何去找到你所需要的代码。除了代码中的宽度之外，还可以很多的特定信息可以进行设备的特定与区别，比如设备高度、方向、视口宽度和高度、分辨率、像素比等等。这些条件可以根据业务需要进行随意组合并进行条件判断。

弹性布局

弹性布局则是另一种在RWD中较为常用的CSS设计方式，试想一下，你有一行水平放置的神奇魔方，其中每个魔方都可以自动调整其宽度和高度以适应可用空间。这就是弹性布局所能做的事情，开发人员可以通过设置父元素的样式属性来创建弹性容器，而子元素则成为弹性项目。弹性容器负责定义子元素的布局行为和对齐方式。话不多说，上代码。 .container display /* 设置为弹性容器 */ justify-content /* 水平方向上居中对齐子元素 */ align-items /* 垂直方向上居中对齐子元素 */ } .item flex 1 /* 子元素的伸缩比例，自动调整宽度和高度 */ } （左右滑动查看完整代码）学过CSS的测试同学看了自然不难，其实代码的目的就像上面博主介绍的那样，我们只是创建了一个神奇的魔方，根据可用的宽高来进行对应的像素伸缩，以达到自适应的效果。

文字和字体

在RWD中，文字和字体也同样作为一个重要的因素，需要开发人员在编码过程中去着重考虑。要像让产品提供良好的阅读体验，那就必须关注各类主流用户使用的设备的对应信息，并在CSS中进行对应的字体处理。比较常见的作法是使用相对单位来设置字体大小，例如使用百分比或em单位。通过使用相对单位，文字的大小会根据父元素的大小进行调整，从而实现适应不同屏幕的效果。但这里博主还是推荐使用媒体查询的方法，通过定义多个媒体查询规则，并在不同的屏幕尺寸下设置不同的字体大小，我们可以确保文字在各种设备上都能够清晰可读。代码实现： body font-size 16px } /* 在小屏幕下设置较小的字体 */ @ media 480dpi body font-size 14px } } /* 在高分辨率屏幕下设置较大的字体 */ @ media 192dpi body font-size 18px } } （左右滑动查看完整代码）这里使用了min-resolution和max-resolution属性，这里是利用了分辨率来继续判断，低于480dpi的分辨率设备将会把字体设置为14px，而设备的分辨率高于192dpi时，字体就设置为18px。

图片

有了文字的对应的处理，那么怎么可以少了图片呢？针对RWD中的图片处理，开发人员也会针对不同的业务场景来进行对应的操作，但不外乎下面说的几种手段。第*，就是一般web产品中的图片都会进行一定程度上的压缩，这个在后端收到上传图片的时候基本已经做了，无论是产品配置的还是用户上传到毕竟都会考虑到服务器的资源压力，都会进行对应的压缩。那针对前端开发的角度，他们就会使用第二和第三种手段，那就是图片格式的选择和响应式的图片加载方式。先说说格式，对于web产品自身的图片格式，通常会选择的现在比较流行的webp格式，它可以比较兼顾图片压缩率和图片质量，另外比较多的就是jpg和png两个格式，但相对webp来说还是webp更有优势一点。至于图片响应式加载，这里也就不用代码演示了，无非就是使用CSS的background-image属性或HTML的标签来实现响应式加载。接下来说说第四种加载图片的方法，图片懒加载。相信大家对于懒加载这个词应该不陌生了吧，图片懒加载其实就是一种图片延迟加载的方式，说直白点就是用户没有将页面滚动到对应的视线区域之前，那区域的对应图片都不会加载。也正是通过这样的方式，web页面可以提高一些对应的加载性能。关于图片懒加载的实现逻辑，就让我们来看下如下的代码： <img class = "lazy" "path/to/image.jpg" "path/to/placeholder.jpg" "Image" （左右滑动查看完整代码）这里我们先给需要进行懒加载的图片在html中进行一个占位，一般来说会使用src来进行占位。这里页面上需要用户进行滚动操作，所以我们利用js来实现检测页面滚动事件，当图片元素进入视线区域时，将其data-src属性的值设置为src属性，从而触发图片的加载。 window 'scroll' function ) var document '.lazy' for var 0 if lazyImages[i].src = lazyImages[i].getAttribute( 'data-src' lazyImages[i].classList.remove( 'lazy' } } }); function isElementInViewport element { var return >= 0 >= 0 rect.bottom <= ( window document rect.right <= ( window document ); } （左右滑动查看完整代码）上面我们通过遍历所有带有.lazy类名的图片元素，判断图片是否进入了视线区域，如果进入了就出发图片加载。当然对于测试人员来说，仍然是只需要知道其中的原理即可。第五种则是CSSsprites，也被称为CSS精灵图。它是一种将多个小图标或小图片合并到一张大图中的技术，开发者通过CSS中的background-position来显示特定位置的图片，这样做的好处就是可以降低网络请求从而提升页面的加载性能。其实CSS精灵图的实现也是比较简单的，说的直白点就是创建一张包含很多小图的大图，并利用CSS的背景定位来显示特定位置的图像。通过这样的方法来避免一次性加载一整张大图。 .icon background-image url width 24px height 24px } （左右滑动查看完整代码） .icon .icon1 background-position 0 0 /* 第*个小图片的位置 */ } .icon .icon2 background-position 24px 0 /* 第二个小图片的位置 */ } （左右滑动查看完整代码） <span class = "icon icon1" </ span <span class = "iconicon2" </ span （左右滑动查看完整代码）就像上面的代码所展示的，我们创建完大图后利用background-position来定位位置，最后在html中使用对应的类名来应用相应的样式。

后话

其实上面所说的一些因素只是RWD中的一部分，其他的内容（菜单、无障碍性等等）今天就不在这里过多的介绍了。作为测试人员来说RWD作为兼容性测试中一个不可或缺的一环，我们在日常的工作中应该不断的对其进行了解并在实战中加以练习和升华，光掌握以上的这些是远远不够的，这篇也仅仅只是博主一时兴起的牢骚话而已，如果可以给大家起到一个抛砖引玉的作用，已是万幸。

End