近期在学习有关响应式设计的内容,对此做了些整理,部分图片来源于网络。
1、为什么需要响应式web设计
由于目前移动设备的大量使用,以及PC显示器的尺寸逐渐出现较大差别,传统的web页面已经不能满足多种设备的浏览效果,比如传统页面在大浏览器中会有较大的空白区域,而在小浏览器已经移动设备中,不能完全显示页面,或是将页面缩小至适应移动设备尺寸大小,不能正常浏览,对于点击触点也有影响,很多人会选择放大页面,在进行浏览,这样整个页面就需要不停的拖动,给用户的体验不好。
简而言之,有如下几点:
- 各种屏幕尺寸
- 各种操作系统
- 各种访问设备
- 各种需求
2、什么是响应式web设计
一个网站兼容多个终端。同样的代码,通过设备适配,满足不同的访问设备,能展现出不同的效果,始终内容优先,移动设备优先(不引人注目的js和逐渐增强),基于浏览器(特性活设备探测的逐渐增强)。
3、响应式设计的替代方案
开发针对网站的、完全独立的移动版本,开发移动应用APP。但这样做也存在一定的不足:
- 开发独立版本的网页,可以通过设备适配进行跳转,需要维护多个页面,对于首页级别页面适用,不适用于内容页
- 开发移动应用,开发成本高,不利于搜索引擎收录
4、响应式web设计的优势&不足
优势:
- 多终端视觉和操作体验风格统一
- 开发、维护、运营成本低
- 不同设备间的兼容性强
- 操作灵活:响应式设计是针对页面的,可以只对必要的页面部分进行改动
- 对用户友好:用户可以与网站一直保持联系,比如URL不变
- 积累分享:通过单一的URL地址收集所有的社交分享链接
- 最佳化搜索引擎:可以完成移动网站和桌面网站的连接
- 无重定向:包含无用户代理定向
不足:
- 兼容性:低版本浏览器可能存在不兼容问题
- 移动带宽流量:相比移动版定制网站,流量稍大
- 加载需要一定的时间:在响应式设计中,需要下载一些看起来并不必要的HTML、CSS。除此之外,图片并没有根据设备调整到合适大小,而这正式导致加载时间加倍的原因
- 优化搜索引擎:对于响应式web设计,为搜索引擎确定关键字不是一件容易的事。因此相比一般的桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难
- Google排名:如果响应式网站仅基于移动内容,它困难会影响到网站的Google排名。因为Google不支持这样的网站,它不会对你的网站进行索引
- 时间花费:开发响应式网站是一项耗时的工作。如果你计划把一个现有的网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计
- 布局:响应式web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后,响应式web设计策略才能真正实现。
5、响应式与自适应的区别
响应式布局:流体网络
- 网页的布局改变
- 重新排布
- 更好的用户体验
- 测试难度大
自适应布局:固定断点
- 网页的完全缩放
- 实施代价低
- 测试容易
- 设计更加可控
6、移动终端屏显元素
移动设备浏览器内核:Trident(IE)、Gecko(FF)、Presto(opera,已废弃)、Webkit(Safari、chrome)、Blink(google)
移动设备的尺寸:iPhone(980),iPad(1024),Android(分辨率480*800情况下,980),WinPhone(1024)等
移动设备的分辨率:
7、响应式web设计流程
用户研究与设备规格预估
框架原型规划&测试
视觉设计
前端构建
相关推荐
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势
毕业设计:vue+springboot乌鲁木齐南山冰雪旅游服务网站(源码 + 数据库 + 说明文档) 2 开发工具及技术 2 2.1 B/S结构的介绍 2 2.2 JSP及SpringBoot技术的介绍 2 2.3 HTML及Vue技术的介绍 2 2.4 MYSQL数据库的介绍 3 2.5 开发环境的介绍 3 3 需求分析 4 3.1 可行性分析 4 3.2 功能需求分析 4 3.3 非功能需求分析 4 4 总体设计 6 4.1 系统总体结构设计 6 4.2 系统的数据库设计 6 5 系统功能实现 6 5.1 注册用户 6 5.2 管理员用户 6 6 系统测试 6 6.1 测试目的 6 6.2 测试内容 6 6.3 测试总结 6
c
华为数字化转型实践28个精华问答.docx
2024年全球二极管阵列光谱仪行业总体规模、主要企业国内外市场占有率及排名
基于51单片机的温度检测调节系统 由STC89C51单片机+液晶1602显示+DS18B20温度传感器+继电器+报警模块构成 具体功能: 1、采用DS18B20温度传感器测温并用LCD1602显示; 2、按键为设置按键、加键和减键。可设置上下限温度控制范围; 3、当温度超过设定的上或下限时,相应的指示灯亮,同时相应的继电器吸合,继电器可以驱动负载工作; 4、温度测量范围0到99.9摄氏度,精度为0.1摄氏度。
2024年中国高量子效率传感器行业研究报告
基于C++14语法的任务链.zip
企业级业务架构设计方法论qy.pptx
liba2ps1-4.15.5-2.2.x86_64
本项目仅限用于学习研究 使用方法 安装依赖 pip install -r requirements.txt 修改main.py中要查询的域名 运行 main.py 即可 备注 官网反爬策略较为玄学,请勿疯狂请求 运行结果为原始响应,如有需要请自行解析
智慧社区解决方案介绍qy.pptx
2024年中国伊维菌素片剂行业研究报告
YOLOv8模型,在目标检测、目标分割、关键点检测上,通过单张图片推理和多张图片同时推理,即:单张推理与批量推理。在不使用循环的情况下将多张图片的结果给推理出来。
libAvogadro1-1.98.1-2.1.aarch64
索尼储能模块 控制器用户手册
本Bash脚本用于自动化管理Java JAR应用的启动、停止及监控。首先检查JAR进程是否在运行,如在运行则安全终止。随后,使用预设的Java参数启动JAR文件,并将输出和错误日志重定向至日志文件。启动后,脚本持续监控JAR进程状态,确保其在预设时间内成功启动。本脚本提供了灵活的配置和错误处理机制,为Java应用的运维管理带来了便捷与可靠性。
基于 pyqt5-yolov8实现打电话、玩手识别系统,包括图片识别,视频识别,视频流识别。包括数据集,完整部署代码,代码使用说明。详细:https://blog.csdn.net/qq_34717531/article/details/138312075。 系统提供两种方式获取视频输入:本地视频文件、实时视频流(rtsp、rtmp等)。对于打电话和玩手机的识别,我采用了一种手机检测和pose姿态结合的识别方式,有效识别出打电话和玩手机,并且防止了手机误检测,手机放在一边误检测问题。对应视频/视频流检测,我们设置了过滤机制,以避免数据库的频繁写入的问题。还设计了优秀的历史记录栏,可以放入检测到的问题图片缩略图,并且点击记录栏,可以弹出标注好信息的图片。该系统利用先进的深度学习技术和图形用户界面设计,为用户提供了一个高效且直观的行为监测工具。实验结果表明,系统能够在多种环境下准确地识别打电话和玩手机的行为,显示出优异的实时性能和较低的误报率。
基于嵌入式