浅谈响应式网页设计 —— 测试该知道的二三事
作者简介：博主是一位测试管理者，同时也是一名对外企业兼职讲师。
主页地址：【Austin_zhai】
目的与景愿：旨在于能帮助更多的测试行业人员提升软硬技能，分享行业相关最新信息。
声明：博主日常工作较为繁忙，文章会不定期更新，各类行业或职场问题欢迎大家私信，有空必回。
阅读目录
- 1. 起因
- 2. 响应式网页设计
- 3. 媒体查询
- 4. 弹性布局
- 5. 文字和字体
- 6. 图片
- 7. 后话
1. 起因
最近几天正巧在帮朋友的公司团队做质量保障体系的培训，在此期间与几个测试人员闲聊，正是其中的一件事让我对今天的话题提起了兴趣：朋友公司里的研发团队招了一个应届毕业生，做了半年之后接了某个web项目的其中一个拓展功能页的开发任务，原本想想熟悉业务也好一阵子了，应该没什么问题。谁曾想提测的那天，测试团队用手机访问将该web页面的时候直接惊呆了，页面的内容竟然无法适应手机的屏幕尺寸，导致用户需要水平滚动或缩放界面才可以看全页面上的内容。结果自然可想而知，该产品直接被打回重造了。
2. 响应式网页设计
RWD，相信这个字眼对于广大的前端开发者来说早已是耳熟能详的了，它也就是我们今天要介绍的主角，响应式网页设计（Responsive Web Design）。简单来说就是我们日常生活中会使用各类设备（手机、平板、笔记本电脑、台式电脑）来进行网页的浏览，那么RWD就是可以让网页能够根据设备的屏幕大小和特征来自动适应和呈现最佳的布局和样式的一种设计方法。
其实不难想象，日常我们使用电脑或大屏设备在访问一些网站的时候有时页面布局和界面元素显示都挺正常，一旦切换到移动端或小屏设备上查看时，页面的布局可能会变得混乱，文字变得难以阅读，按钮变得难以点击。这种软件的用户体验可以说是十分的糟糕了，说的再严重一点，站在开发商的角度，你的用户就有可能因为软件界面布局的用户体验差而直接放弃你的产品。所以各自的web产品如何提供一个无论在什么设备上都能良好呈现和使用的用户体验的效果，自然就成了前端软件开发的重要考虑内容之一。
同样的，作为一个测试人员，我们在进行日常的测试活动的过程中也一定会碰见各式各样的测试设备，这些设备的型号都是由产品或业务人员进行准确的数据收集而得到的。那么针对这样的一个测试业务状况，我们一定会展开对应的测试互动（兼容性测试）。而在此类的测试活动中，我们不得不提的另一个重要概念就是web产品中的RWD，接下来就说一说在RWD中一些开发熟知但测试却不一定知道的二三事。
3. 媒体查询
在承载web页面的各类设备中，前端开发人员是可以利用CSS中的一种技术来取得设备的特征和属性的，而这种技术就叫做媒体查询，顾名思义，利用媒体查询我们的开发人员就可以获取设备的屏幕分辨率、设备类型、设备方向等特定的信息。正是利用这些特定的查询信息，开发人员就可以将它们进行组合，从而编写针对不同设备特征和属性的样式规则，以实现响应式网页设计和适应不同设备的布局和样式需求。
接下来我用一段简易的html代码来为大家展示如何实现媒体查询：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Web Design Exampletitle>
<style>
/* 媒体查询针对移动设备 */
@media screen and (max-width: 414px) {
/* 在屏幕宽度小于或等于414px时应用的样式 */
body {
background-color: red;
}
}
/* 媒体查询针对2K分辨率屏幕 */
@media screen and (min-width: 2560px) {
/* 在屏幕宽度大于或等于2560px时应用的样式 */
body {
background-color: blue;
}
}
style>
head>
html>
以上的代码就是在页面的