HTML5+CSS3 Web前端设计基础教程 第3版（第11章）

第11章本章将从职业发展前景出发，立足职位需求，向读者介绍有关Web前端所涉及的入门知识。WebApp类页面的设计与实现11.1WebApp开发基础知识11.1.1开发模式概述目前，移动应用前端开发模式有NativeApp（原生APP）、WebApp，以及由前两种开发模式融合后的HybridApp（混合模式）。1．NativeApp简述2．WebApp简述3．HybridApp简述1．屏幕分辨率像素是构成数码影像的基本单元，而屏幕分辨率指的是在横纵方向上的像素点数。2．像素密度PPI像素密度指的是屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixelsperinch”的缩写，像素密度越高，代表屏幕显示效果越精细。3．网点密度DPI网点密度（DotPerInch）来描述印刷品的打印精度，就是打印机可以在一英寸内打多少个点。11.1WebApp开发基础知识11.1.2手机屏幕基本知识11.1WebApp开发基础知识物理分辨率是硬件所支持的分辨率，逻辑分辨率是软件可以达到的分辨率。逻辑分辨率乘以一个倍率得到物理分辨率，这个倍率叫做像素倍率。表11-1常见的iOS设备屏幕参数4．逻辑分辨率与像素倍率iPhone14ProiPhone13miniiPhone11iPhoneX像素分辨率1179px×2556px1125px×2436px828px×1792px1125px×2436px像素倍率@3×@3×@2×@3×逻辑分辨率393pt×852pt375pt×812pt414pt×896pt375pt×812pt物理尺寸6.1英寸5.4英寸6.1英寸5.8英寸像素密度460ppi476ppi326ppi458ppi11.1WebApp开发基础知识表11-2常见Android设备屏幕参数ldpimdpihdpixhdpixxhdpixxxhdpi网点密度范围<120dpi120～160dpi160～240dpi240～320dpi320～480dpi480～640dpi像素分辨率已经绝迹320px×480px480px×800px720px×1280px1080px×1920px1440px×2560px像素倍率0.751倍1.5倍2倍3倍4倍11.2Swiper插件1．如何获取Swiper插件是一款免费且开源的JS插件，主要用在移动端的开发，能很好地支持触摸设备上的滑动操作、支持水平和垂直的幻灯展示等诸多操作。2．如何使用由于此类插件都是已经调试成功的，所以在使用时只需要加载插件、按照结构修改内容，最后初始化Swiper的流程即可使用。图11-1

使用Swiper插件实现左右滑动效果图11-4首页图11-5列表页

图11-6详细内容页11.3.1页面分析11.3WebApp页面分析与环境准备固定的头部区域可以上下滚动的内容区域固定的底部区域拟使用navbar-fixed-top类解决固定在屏幕顶部问题拟使用Swiper插件实现左右滑动效果拟使用栅格系统解决多列布局问题拟使用navbar-fixed-bottom类解决固定在屏幕底部问题图11-6页面结构分析11.3“宇泽鲜风商城”WebApp页面分析与环境准备1．在Dreamweaver中设置适合移动端预览的视图2．在Google浏览器中设置适合移动端预览的窗口11.3“宇泽鲜风商城”WebApp页面分析与环境准备11.3.2环境准备图11-6

“编辑大小”选项图11-9

设置新添加设备的参数1．创建站点并引入各类文件2．搭建主体框架3．Fixedtoper区域的实现11.4页面实现的详细过程11.4.1首页的实现11.4页面实现的详细过程图11-10Google浏览器iPhone6虚拟界面预览效果11.4页面实现的详细过程图11-11正在左右滑动的广告4．banner区域的实现11.4页面实现的详细过程图11-12使用栅格系统实现2行4列排版图11-13content区域最终效果5．content区域的实现1．List页面顶部区域的实现11.4页面实现的详细过程图11-15list页面顶部区域预览效果11.4.2列表页的实现11.4页面实现的详细过程图11-17list页面内容区域预览效果2．列表内容的实现图11-18list页面最终预览效果1．商品价格区域的实现11.4页面实现的详细过程图11-20商品价格区域预览效果11.4.3详细内容页的实现11.4页面实现的详细过程2．