Chapter06Web前端框架与移动应用开发TP06

第六章移动Web页面开发,预习检查,移动端视口有几种，分别是什么？理想视口是什么，怎么实现理想视口?相对单位em的特性是什么？相对单位rem的特性是什么？,集中测试,2/39,回顾与作业点评,响应式布局有什么用，各有什么优缺点？媒体查询类型有哪些？12栅格系统的使用有哪些？Bootstrap常用的组件有哪些？Bootstrap插件的作用，有哪些常用的插件？点评作业的提交情况和共性问题,回顾,作业点评,3/39,本章任务,制作公司请假查询表制作我的商品收藏页面制作我的浏览器记录页面,4/39,本章目标,会使用Chrome浏览器模拟移动网页测试会使用视口标签让网页在理想视口下预览会使用em布局网页内容会使用rem布局网页内容,5/39,如今的移动行业,移动互联网的发展智能手机迅速发展移动Web应用的发展移动端的开发需求逐年增加,6/39,移动网页开发与PC网页开发的区别,终端设备及浏览器分辨率视口输入特性鼠标、键盘触摸,7/39,移动浏览器及测试环境,PC端开发浏览器Chrome、IE、Opera、Safari、Firefox移动浏览器的类型内置浏览器、可下载浏览器、代理浏览器、WebView,8/39,移动开发测试浏览器,使用Chrome浏览器作为移动开发测试浏览器的原因很多的手机浏览器都用Webkit作为渲染引擎学习成本Chrome浏览器移动测试,9/39,Chrome浏览器移动测试环境3-1,EmulationDevice：可以选择要测试的设备及型号，Protrait可以测试竖屏显示的网页，Landscape可以测试横屏显示的网页Emulatescreenresolution：该选项前面有一个复选框，勾选后表示采用Emulation模拟移动网页，不选择就是不模拟移动环境。一般建议是都要勾选Resolution：设备像素Devicepixelratio：设备像素比Emulatemoble：模拟移动端特性，一般需要勾选Shrinktofit：以适当尺寸适配，一般需要勾选,10/39,Chrome浏览器移动测试环境3-2,NetWorkconditionsDiskcache：磁盘缓存，默认是不缓存的networkthrottling：网络节流，点击后面的下拉菜单，可以选择不同的网络供开发者测试模拟useragentspoofing：用户代理商，可以选择是默认代理商，或是自定义代理商,11/39,Chrome浏览器移动测试环境3-3,SensorsEmulategeolocationcoordinates：是否需要模拟地理定位。勾选这个框后下面的两个选项就会变成可编辑状态。一般这个功能会出现在需要地理定位，或是引用地图的时候lat（经度）Lon（纬度）Accelerometer：模拟陀螺仪。可以手动的改变3个轴上的值，看到右边小框就会发生旋转。这个功能一般是用于摇一摇等有重力感应的场景设备绕Z轴旋转的数值设备绕X轴旋转的数值设备绕Y轴旋转的数值,12/39,快捷使用Chrome的移动测试环境,13/39,需求说明上网寻找任意网页使用Chrome浏览器的Emulator练习测试,学员操作使用Chrome浏览器模拟测试移动端页面,练习,14/39,视口,1,分析,headerheight:50px;background:pink;margin-bottom:10px;asidewidth:30%;background:red;height:300px;float:left;articlewidth:68%;background:pink;height:300px;float:left;,桌面浏览器中，width为30%的侧边栏会占视口宽度的30%,15/39,布局视口2-1,如果把示例1的放在移动设备上预览会是什么样子呢？,思考,视口是移动端狭窄的屏幕，网站会在水平方向被挤扁,16/39,布局视口2-2,相同的内容，当窗口变窄，只是尽可能缩小网站来让用户看到网站的全貌。这对易读性来说不是件好事,在移动端上如何显示PC端的网页？在移动端上，视口与移动浏览器屏幕宽度不再相关联，而是完全独立的，我们称它为布局视口,提问,手机上，为容纳桌面浏览器设计的网站，默认的布局视口宽度远大于手机屏幕的宽度,17/39,视觉视口,虽然独立布局视口的创造很大程度上帮助了桌面网站到手机的转移，但是我们不能完全无视移动端设备的屏幕尺寸视觉视口是用户正在看的网站区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口，布局视口仍然保持原来的宽度,需要注意的是视觉视口与设备屏幕一样宽，并且它的CSS像素的数量会随着用户的缩放而改变,18/39,理想视口,默认情况下，一个手机或平板浏览器的布局宽度是在768px-1024px。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站真正适合手机的视口是什么呢？理想视口,;,19/39,视口标签,语法,;,设置页面的初始缩放程度,设置最大的缩放程度（用户可放大的程度）,设置布局视口的宽度为特定的值,设置最小的缩放程度（用户可缩小的程度）,是否阻止用户进行缩放,20/39,伸缩换行flex-wrap,使用Chrome浏览器模拟移动环境测试该示例,视口标签的作用,视口标签大家来观察没有写视口标签和添加视口标签的区别,视口标签大家来观察没有写视口标签和添加视口标签的区别,示例,21/39,伸缩换行flexrap,快捷方式在Webstorm编辑器中输入“meta:vp”然后按下tab键即可自动生成一般情况下就是用这些默认属性，不需要更改,视口标签的快捷方式,经验,22/39,设备像素比,设备像素设备像素是设备屏幕的物理像素，任何设备的物理像素的数量是固定的设备像素比设备像素个数和理想视口的比，称为设备像素比（devicePixelRatio，简称DPR）DPI用像素的数量除以屏幕的以英寸为单位的宽度可以得到你的设备每英寸的点数（简称DPI）,23/39,移动网页开发,移动网页开发和PC网页开发有什么异同？不同点适配不同的分辨率和屏幕尺寸兼容的浏览器相同点布局结构使用的技术,24/39,使用相对长度单位em布局网页内容,em是描述相对于当前对象内文本的字体尺寸，它是相对长度单位。一般浏览器字体大小默认为16px,htmlfont-size:1em;我是div里的内容我是div-p里面的内容我是div-p-span里的内容,htmlfont-size:1em;divfont-size:1.5em;我是div里的内容我是div-p里面的内容我是div-p-span里的内容,htmlfont-size:1em;divfont-size:1.5em;pfont-size:1.5em;我是div里的内容我是div-p里面的内容我是div-p-span里的内容,示例,25/39,相对单位em的特性em的值并不是固定的em会继承父级元素的字体大小（相对父级的字体大小而发生变化）实际应用中每次都这样去乘以父级的大小也是很麻烦的，有什么方法可以简化？如果1em等于10px，那计算起来就方便了PX和em在线转换的网站：,相对单位em,bodyfont-size:62.5%;,思考,经验,26/39,需求说明使用定义列表标签布局页面结构，标题的背景颜色是#4CCDE0使页面在理想视口下预览使用相对单位em设置页面字体、宽度等大小尺寸能让页面自适应不同型号屏幕的移动设备,学员操作制作公司请假查询页面,练习,27/39,常见问题及解决办法代码规范问题调试技巧,共性问题集中讲解,28/39,使用相对长度单位rem布局网页内容,rem是CSS3新增的一个相对单位（rootem，根em）rem与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素,htmlfont-size:1rem;我是div里的内容我是div-p里面的内容我是div-p-span里的内容,htmlfont-size:1rem;divfont-size:1.5rem;我是div里的内容我是div-p里面的内容我是div-p-span里的内容,htmlfont-size:1rem;divfont-size:1.5rem;pfont-size:1.5rem;我是div里的内容我是div-p里面的内容我是div-p-span里的内容,示例,29/39,相对单位rem2-1,相对单位rem的特性rem的值并不是固定的rem是相对根节点html发生变化的（和父节点无关）实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算,30/39,相对单位rem2-2,相对单位rem是集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素字体大小就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应,$(function()functionsetRem()varclientWidth=$(window).width();varnowRem=(clientWidth/375*10);$(html).css(font-size,parseInt(nowRem,10)+px);setRem();$(function()vartimer;$(window).bind(resize,function()clearTimeout(timer)timer=setTimeout(function()setRem();,100););,示例,31/39,需求说明使用HTML5结构元素和无序列表布局页面，标题的背景颜色是#e6071b使页面在理想视口下预览使用相对单位rem设置页面字体、宽度等大小尺寸，并通过Javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小能让页面自适应不同型号屏幕的移动设备,学员操作制作我的-浏览记录页面,练习,32/39,常见问题及解决办法代码规范问题调试技巧,共性问题集中讲解,33/39,需求说明使用HTML5结构元素和无序列表布局页面，标题的背景颜色是#e6071b使用CSS3变形属性中的rotate逆时针旋转“已使用”文字30度使页面在理想视口下预览使用相对单位rem设置页面字体、宽度等大小尺寸，并通过Javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小能让页面自适应不同型号屏幕的移动设备,学员操作制作我的电子券页面,练习,34/39,常见问题及解决办法代码规范问题调试技巧,共性问题集中讲解,35/39,总结,移动前端概述移动开发测试浏览器移动端视口及视口标签移动端网页开发,使用相对单位em进行网页布局使用相对单位rem进行网页布局,布局视口视觉视口理想视口,移动Web页面开发,如今的移动行业移动网页开发与PC网页开发的区别,内置浏览器可下载浏览器代理浏览器WebView,EmulationNetW