




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
项目五任务一将页面转为响应式设计目录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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年度河北省护师类之护士资格证押题练习试题B卷含答案
- 2024年度河北省护师类之护士资格证考前冲刺试卷B卷含答案
- 2025江苏扬州宝应县“乡村振兴青年人才”招聘67人笔试参考题库及完整答案详解一套
- 2025江苏苏州高新区管委会人才引进120人笔试备考题库及完整答案详解一套
- 2025广西来宾市招聘乡村振兴专员221人笔试备考试题及答案详解一套
- 2025年东营市公务员考试行测真题附答案详解(完整版)
- 2025年人教统编版语文四年级下册全册月考测试题及答案(共4套)
- 2025年宝鸡市公务员考试行测试卷历年真题及答案详解一套
- 内蒙古自治区通辽市科尔沁左翼中旗保康第二中学2024-2025学年七年级下学期5月月考数学试卷(含答案)
- 陕西省西安市某校2024-2025学年高一上学期期末考试物理试卷(解析版)
- 工业副产盐再利用的环境风险评估
- 2025-2030中国乙醚行业市场发展趋势与前景展望战略分析研究报告
- 挡土墙搭设脚手架专项专题方案
- 2025年(四川)公需科目(心理健康与职业发展主题)题库及答案
- CJJ1-2025城镇道路工程施工与质量验收规范
- GB/T 20424-2025重有色金属精矿产品中有害元素的限量规范
- 2025美国急性冠脉综合征(ACS)患者管理指南解读课件
- 国家开放大学电大《国际私法》形考任务1-5题库及答案
- 《哪吒魔童降世》幼儿园小学少儿美术教育绘画课件创意教程教案
- 2022年全国森林、草原、湿地调查监测技术规程-附录
- 统编版语文六年级下册古诗词诵读 8 卜算子·送鲍浩然之浙东 课件
评论
0/150
提交评论