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

news2024/12/25 9:22:33

在这里插入图片描述

 
 

在这里插入图片描述
😏作者简介:博主是一位测试管理者,同时也是一名对外企业兼职讲师。
📡主页地址:【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 Example</title>
  <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>

  以上的代码就是在页面的<style>标签内针对设备的屏幕宽度进行判断,从而达到面向不同屏幕大小的设备时,可以有针对性的展示对应的背景颜色。当然真正的业务代码不会如此的简单,但作为测试你需要的就是掌握其中的实现原理,在日后接触到前端产品代码的时候知道如何去找到你所需要的代码。

 

  除了代码中的宽度之外,还可以很多的特定信息可以进行设备的特定与区别,比如设备高度、方向、视口宽度和高度、分辨率、像素比等等。这些条件可以根据业务需要进行随意组合并进行条件判断。

 
 

4. 弹性布局

在这里插入图片描述
  弹性布局则是另一种在RWD中较为常用的CSS设计方式,试想一下,你有一行水平放置的神奇魔方,其中每个魔方都可以自动调整其宽度和高度以适应可用空间。这就是弹性布局所能做的事情,开发人员可以通过设置父元素的样式属性来创建弹性容器,而子元素则成为弹性项目。弹性容器负责定义子元素的布局行为和对齐方式。

 

  话不多说,上代码。

.container {
  display: flex; /* 设置为弹性容器 */
  justify-content: center; /* 水平方向上居中对齐子元素 */
  align-items: center; /* 垂直方向上居中对齐子元素 */
}

.item {
  flex: 1; /* 子元素的伸缩比例,自动调整宽度和高度 */
}

  学过CSS的测试同学看了自然不难,其实代码的目的就像上面博主介绍的那样,我们只是创建了一个神奇的魔方,根据可用的宽高来进行对应的像素伸缩,以达到自适应的效果。

 
 

5. 文字和字体

在这里插入图片描述
  在RWD中,文字和字体也同样作为一个重要的因素,需要开发人员在编码过程中去着重考虑。要像让产品提供良好的阅读体验,那就必须关注各类主流用户使用的设备的对应信息,并在CSS中进行对应的字体处理。比较常见的作法是使用相对单位来设置字体大小,例如使用百分比或em单位。通过使用相对单位,文字的大小会根据父元素的大小进行调整,从而实现适应不同屏幕的效果。但这里博主还是推荐使用媒体查询的方法,通过定义多个媒体查询规则,并在不同的屏幕尺寸下设置不同的字体大小,我们可以确保文字在各种设备上都能够清晰可读。

 

  代码实现:

body {
  font-size: 16px;
}

/* 在小屏幕下设置较小的字体 */
@media screen and (max-resolution: 480dpi) {
  body {
    font-size: 14px;
  }
}

/* 在高分辨率屏幕下设置较大的字体 */
@media screen and (min-resolution: 192dpi) {
  body {
    font-size: 18px;
  }
}

  这里使用了min-resolutionmax-resolution属性,这里是利用了分辨率来继续判断,低于480dpi的分辨率设备将会把字体设置为14px,而设备的分辨率高于192dpi时,字体就设置为18px。

 
 

6. 图片

在这里插入图片描述
  有了文字的对应的处理,那么怎么可以少了图片呢?针对RWD中的图片处理,开发人员也会针对不同的业务场景来进行对应的操作,但不外乎下面说的几种手段。第一,就是一般web产品中的图片都会进行一定程度上的压缩,这个在后端收到上传图片的时候基本已经做了,无论是产品配置的还是用户上传到毕竟都会考虑到服务器的资源压力,都会进行对应的压缩。那针对前端开发的角度,他们就会使用第二和第三种手段,那就是图片格式的选择和响应式的图片加载方式。先说说格式,对于web产品自身的图片格式,通常会选择的现在比较流行的webp格式,它可以比较兼顾图片压缩率和图片质量,另外比较多的就是jpg和png两个格式,但相对webp来说还是webp更有优势一点。至于图片响应式加载,这里也就不用代码演示了,无非就是使用CSS的background-image属性或HTML的<picture>标签来实现响应式加载。

 

  接下来说说第四种加载图片的方法,图片懒加载,相信大家对于懒加载这个词应该不陌生了吧,图片懒加载其实就是一种图片延迟加载的方式,说直白点就是用户没有将页面滚动到对应的视线区域之前,那区域的对应图片都不会加载。也正是通过这样的方式,web页面可以提高一些对应的加载性能。

  关于图片懒加载的实现逻辑,就让我们来看下如下的代码:

<img class="lazy" data-src="path/to/image.jpg" src="path/to/placeholder.jpg" alt="Image">

  这里我们先给需要进行懒加载的图片在html中进行一个占位,一般来说会使用src来进行占位。

 

  这里页面上需要用户进行滚动操作,所以我们利用js来实现检测页面滚动事件,当图片元素进入视线区域时,将其data-src属性的值设置为src属性,从而触发图片的加载。

window.addEventListener('scroll', function() {
  var lazyImages = document.querySelectorAll('.lazy');
  
  for (var i = 0; i < lazyImages.length; i++) {
    if (isElementInViewport(lazyImages[i])) {
      lazyImages[i].src = lazyImages[i].getAttribute('data-src');
      lazyImages[i].classList.remove('lazy');
    }
  }
});

function isElementInViewport(element) {
  var rect = element.getBoundingClientRect();
  
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

  上面我们通过遍历所有带有.lazy类名的图片元素,判断图片是否进入了视线区域,如果进入了就出发图片加载。当然对于测试人员来说,仍然是只需要知道其中的原理即可。

 

  第五种则是CSS sprites,也被称为CSS精灵图,它是一种将多个小图标或小图片合并到一张大图中的技术,开发者通过CSS中的background-position来显示特定位置的图片,这样做的好处就是可以降低网络请求从而提升页面的加载性能。

  其实CSS精灵图的实现也是比较简单的。说的直白点就是创建一张包含很多小图的大图,并利用CSS的背景定位来显示特定位置的图像。通过这样的方法来避免一次性加载一整张大图。

.icon {
  background-image: url(path/to/test.png);
  width: 24px;
  height: 24px;
}
.icon.icon1 {
  background-position: 0 0; /* 第一个小图片的位置 */
}

.icon.icon2 {
  background-position: -24px 0; /* 第二个小图片的位置 */
}
<span class="icon icon1"></span>
<span class="icon icon2"></span>

  就像上面的代码所展示的,我们创建完大图后利用background-position来定位位置,最后在html中使用对应的类名来应用相应的样式。

 
 

7. 后话

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/623246.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode】每日一题 -- 1240. 铺瓷砖 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/tiling-a-rectangle-with-the-fewest-squares/ 1. 题解&#xff08;1240. 铺瓷砖&#xff09; 23.05.31 华为机试第二题 1.1 暴力深搜 – DFS NP-Complete 问题 题解参考&#xff1a;Java DFS暴力递归&#xff08;详细注释&…

LeetCode 2352. Equal Row and Column Pairs【模拟,哈希表,前缀树】中等

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

100G QSFP28光模块类型和使用场景

100G QSFP28光模块是当前数据中心和通信网络中广泛应用的高速光模块之一。本文将详细介绍100G QSFP28光模块的类型、应用场景以及市场发展前景&#xff0c;并引用相关产品参数和行业统计数据&#xff0c;为读者提供全面的了解。 一、100G QSFP28光模块类型 100G QSFP28光模块…

开源 API 网关的访问策略(一)

许多企业和组织面临着网关访问控制的挑战&#xff0c;因为传统的访问控制方法往往过于笨重和繁琐。这些方法可能涉及复杂的规则集、繁琐的手动配置过程、缺乏灵活性和可扩展性等问题。此外&#xff0c;随着云计算和移动设备的广泛应用&#xff0c;访问控制的复杂性和挑战程度也…

stable-diffusion-webui 安装采坑日记

这里写自定义目录标题 安装容易采坑的点效果测试 安装容易采坑的点 1、不愿安装大佬的整合包。在自己时间足够多的情况下&#xff0c;可以尝试自己搭环境。但是自己安装的时间成本真的非常高&#xff0c;环境配置报错会让人陷入崩溃&#xff0c;如果没有代码排错能力&#xff…

sw2urdf导出的urdf文件中的惯性参数(inertial)错误的问题

现象描述 有时候&#xff0c;当我们使用solidworks建好我们的模型&#xff0c;然后利用【sw2urdf】导出后&#xff0c;发现其中的惯性参数&#xff0c;似乎不正确&#xff0c;ixx、izz这些参数都是很接近0的&#xff1a; 资料查找 其实这个不是我们设置的问题&#xff0c;而…

蓝牙耳机什么牌子好?无线蓝牙耳机品牌推荐

相信很多人都有过这样的经历&#xff0c;早晚高峰像沙丁鱼般被挤在公交或地铁上&#xff0c;嘈杂的环境、工作的劳累让你只想听听音乐追追剧&#xff0c;给自己一些放松的时光。可拿出有线耳机却常常被挤掉&#xff0c;更有被扯到耳朵的时候。想换一款蓝牙耳机&#xff0c;但面…

做连接中国企业出海的全球技术桥梁,亚马逊云科技出海日盛夏盛启

出海路漫漫&#xff0c;企业开拓全球市场而孤军奋战&#xff0c;常常会感到力不从心。好的产品有了&#xff0c;渠道有了&#xff0c;供应链有了&#xff0c;还要自己从0-1搭建存储、网络和架构&#xff1f;营销季来了想趁机冲一波销量&#xff0c;还要自己运维本地IDC、大促来…

docker-compose 部署zookeeper集群 —— 筑梦之路

1. zookeeper介绍 Zookeeper是一个开源的分布式协调服务中间件&#xff0c;它提供了一种分布式数据管理服务&#xff0c;能够实现分布式锁、命名服务、配置管理、集群管理等功能&#xff0c;从而帮助用户构建高可用、高性能的分布式系统。以下是Zookeeper的一些主要特点和功能&…

Java注解的入门学习

一、概念 Java注解是一种元数据形式&#xff0c;可以被添加到Java代码中的各种元素&#xff08;类、方法、字段等&#xff09;上&#xff0c;以提供关于这些元素的额外信息。注解是在Java 5中引入的一项特性&#xff0c;它们不直接影响代码的执行&#xff0c;而是提供了一种机…

顺序表算法练习

一.顺序表基础算法 1.说明 博主这里是算法练习&#xff0c;帅气的读者来这里默认已经知道了它&#xff0c;这里主要是针对408考研真题中关于线性表的算法题进行编写。第一部分是根据课本编写线性表的基本函数&#xff0c;剩下四个部分是针对考研真题的算法练习。 2.C语言代码…

ChatGLM的模型架构

ChatGLM的部署微调等&#xff0c;很多资料&#xff0c;不再赘述。 P-tuning V2 以P-Turing V2为例&#xff0c;介绍ChatGLM的网络结构。P-tuning V2方法训练时冻结模型的全部参数&#xff0c;只激活prefix_encoder的参数。 1、prefix encoder 初始化pre_len&#xff0c;代表…

Apple pencil平替哪款好?平价电容笔测评

现今&#xff0c;使用电容笔的人越来越多&#xff0c;各大品牌厂商对电容笔各种性能的设计也愈发用心。那么&#xff0c;电容笔哪个品牌好用呢&#xff1f;下面&#xff0c;我来给大家推荐几款质量好的Apple pencil平替&#xff0c;需要的小伙伴可以当个参考。 一、如何挑选到…

Vue3+TS+Vite开发组件库并发布到npm

Vue2开发插件并发布到npm 使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub 目标&#xff1a;创建 vue-amazing-ui 组件库 &#xff0c;并发布到npm 该组件库已发布到 npm&#xff0c;直接安装即可使用&#xff1a; pnpm i vue-amazing-ui #or yarn add vue-a…

(十一)K8S可视化工具Rancher学习、安装

1.Rancher背景概述 在过去几年中&#xff0c;容器技术如 Docker 和容器编排引擎如 Kubernetes 受到了广泛关注和采用&#xff0c;它们为应用程序的部署、可扩展性和管理带来了革命性的变化。 然而&#xff0c;随着容器技术的快速发展&#xff0c;容器集群的管理和操作变得越来…

【笔试强训选择题】Day21.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01; 文章目录 前言 一、…

hadoop搭建、mysql、hive部署

写在前面&#xff1a; 本篇文章基于linux系统Centos7环境下进行搭建、操作 仅作为学习参考借鉴&#xff0c;欢迎大家交流学习&#xff01;一、 HDFS安装搭建 1.1 关闭虚拟机防火墙 在之后的学习、操作中&#xff0c;经常会遇到在宿主机中通过程序去访问虚拟机中的相关软件&am…

再获肯定!Coremail入选2023网络空间安全大会优秀案例!

6月2日-3日&#xff0c;在中国电子学会主办的“2023网络空间安全大会”上&#xff0c;由广东盈世计算机科技有限公司申报的“Coremail邮件安全解决方案”获评2023网络空间安全大会优秀案例&#xff0c;再次获得行业权威认可&#xff01; 本次大会由中国电子学会主办&#xff0c…

hudi系列-append写过程

前言 Append模式每次都生成新的parquet文件,不涉及数据修改、去重。cow+insert一直是append模式,mor+insert在0.13.1后也统一走append写流程(HUDI-6045) 在0.13.1之前,mor+insert存在着写parquet和写log两种情况: 写parquet:compaction.schedule.enabled = false & …

Loadrunner和JMeter、Locust三款性能测试工具全面对比

随着软件技术的发展&#xff0c;软件应用越来越普遍&#xff0c;不仅仅是互联网大厂的应用需要进行性能测试了&#xff0c;就连一些中小型的互联网应用也越来越需要对软件项目进行性能测试了。所以本文就将通过Loadrunner、JMeter和Locust三款性能测试工具从以下几个方面进行介…