Web前端开发必知必会 课件-中文版 lesson 15-1 响应式设计策略_第1页
Web前端开发必知必会 课件-中文版 lesson 15-1 响应式设计策略_第2页
Web前端开发必知必会 课件-中文版 lesson 15-1 响应式设计策略_第3页
Web前端开发必知必会 课件-中文版 lesson 15-1 响应式设计策略_第4页
Web前端开发必知必会 课件-中文版 lesson 15-1 响应式设计策略_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10LESSON15-1设计原则、策略、优化CONTENTS01响应式设计特点02设计原则与策略03设计优化响应式网页特点自适应流动宽度:使用%代替px不同视口宽度不同布局（单列、两列、多列）不同视口，内容可不同使用唯一URL

更少的工作，搜索优化01响应式设计优缺点优点面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长一定程度上改变了网站原有的布局结构，会出现用户混淆的情况设计原则注重用户体验内容为先策略移动优先设备无关的设计可访问性（通用化设计）

--资源被尽可广的用户群体使用过渡平稳02内容策略（contentstrategy）

内容策略——是规划和管理内容的一种方法内容为先精简内容使用分级标题、使用列表自适应内容创建长期有效的内容2024/4/10设计优化用户体验性能性能的重要性性能作为设计元素提高网页加载速度与效率03提高网页加载速度与效率减少页面重量较小的文件（使用较小的图像文件）较少的文件量（如图像拼合）

减少页面渲染的阻塞用HTML5/CSS3代替JavaScript使用<link>而不是@import加载CSS样式清理代码避免重复使用CSS代码缩小：使用“瘦身”工具缩小CSS、HTML、JavaScript（去除空白、注释等）2024/4/10其他响应式设计相关使用原型原型（prototype），是指模拟要开发的系统的原始模型作用：同早些年的线框图是一个“真正的”网页，有基本布局，可以调整视口大小，看其布局的变化HTML快速原型框架工具FoundationBootstrap……导航设计竖向、横向的选择自适应宽度2024/4/10响应式设计小结内容为先策略客户体验为中心熟练使用CSS样式（使用相对尺寸）熟练使用媒体查询从小屏开始合理设置断点小心处理图像缩小文件清理代码可以使用原型框架2024/4/

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论