web前端技术应用 课件 代强 项目五 制作移动终端页面_第1页
web前端技术应用 课件 代强 项目五 制作移动终端页面_第2页
web前端技术应用 课件 代强 项目五 制作移动终端页面_第3页
web前端技术应用 课件 代强 项目五 制作移动终端页面_第4页
web前端技术应用 课件 代强 项目五 制作移动终端页面_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

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

文档简介

项目五任务一将页面转为响应式设计目录1.阻止移动浏览器自动调整页面大小2.使用媒体查询1.阻止移动浏览器自动调整页面大小

使用智能手机浏览桌面端网站时，一般会自动缩放到合适的宽度使视口能够显示整个页面，但是这样会使文字变得很小，浏览内容不方便。

通过设置meta标签的“viewport”属性设定加载网页时以原始的比例显示网页，并将meta标签加到<head>标签里。viewport是网页默认的宽度和高度，网页宽度默认等于设备宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，表示支持该特性的浏览器都会按照设备宽度的实际大小来渲染网页。1.阻止移动浏览器自动调整页面大小2.媒体查询媒体查询是实现响应式设计的关键技术，它可以根据设备显示器的特性为其设定CSS样式。仅使用几行代码，就可以根据诸如视图宽度、屏幕比例、设备方向(横向或纵向)等特性改变页面内容的显示方式，通过添加link标签实现。2.媒体查询3.流式布局媒体查询功能虽然强大，但也有局限性，在变化页面时没有平滑渐变，为了实现更灵活的设计，需要使用流式布局。流式布局的特点是：能使页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。《Web前端技术应用》课程谢谢观看项目五任务二测试网页1.链接测试①测试网页中的链接是否正确链接到预定的网页位置或页面。②链接到的网页是否存在。③网站中的页面是否有孤立的存在。这里孤立的存在是指没有任何链接指向该页面，对该页面的访问只能通过地址进行。2.表单测试

用户常常需要填写各种各样的信息，例如，用户登录时的用户名称和密码，并将这些信息传递给服务器。这就是表单的基本功能。2.表单测试3.浏览器测试

同一张网页在不同的浏览器中都会有不同的层次和框架显示。虽然随着技术的完善，各种浏览器对主流技术的支持越来越好，彼此之间的支持差异也在缩小；但对网页开发，特别是动态网站的开发来说，浏览器的兼容测试仍旧是必不可少的一个环节。3.浏览

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

温馨提示

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

最新文档

评论

0/150

提交评论