HTML5+CSS3 Web前端设计基础教程(第10章)

10.1 Web App开发基础知识
4．逻辑分辨率与像素倍率 物理分辨率是硬件所支持的分辨率，逻辑分辨率是软件可以达到的分辨率。
逻辑分辨率乘以一个倍率得到物理分辨率，这个倍率叫做像素倍率。
表10-1 常见的iOS设备屏幕参数 iPhone 6 Plus 像素分辨率 像素倍率 逻辑分辨率 物理尺寸 屏幕密度 1242×2208 px @3× 414×736 pt 6.22×3.06 英寸 401 ppi iPhone 6 750×1334 px @2× 375×667 pt 5.44×2.64 英寸 326 ppi iPhone 5s 640×1136 px @2× 320×568 pt 4.87×2.31英寸 326 ppi
10.1 Web App开发基础知识
表10-2 常见Android设备屏幕参数 ldpi mdpi 120dpi～ 160dpi hdpi 160dpi～ 240dpi xhdpi 240dpi～ 320dpi xxhdpi 320dpi～ 480dpi xxxhdpi 480dpi～ 640dpi
10.1.2 手机屏幕基本知识
1．屏幕分辨率
像素是构成数码影像的基本单元，而屏幕分辨率指的是在横纵方向上的像 素点数。 2．像素密度PPI 像素密度指的是屏幕上每英寸可以显示的像素点的数量，单位是ppi，即
“pixels per inch”的缩写，像素密度越高，代表屏幕显示效果越精细。
3．网点密度DPI 网点密度（Dot Per Inch）来描述印刷品的打印精度，就是打印机可以在 一英寸内打多少个点。
工业和信息化“十三五” 高职高专人才培养规划教材
Web前端设计 基础教程
HTML5+CSS3
10
Web App类页面的设计与实现
【本章导读】
本章在巩固各类知识点的基础上，向读者介绍Web App类型的网站是
如何被制作出来的，并拓展介绍在实际的项目开发中常见的Bootstrap框架 和Swiper插件的简易使用方法。
表10-3 Bootstrap栅格系统部分参数 超小屏幕 手机 (<768px) 类前缀 .col-xs小屏幕 平板 (≥768px) .col-sm中等屏幕 桌面显示 大屏幕 大桌面显示 器 (≥992px) 器 (≥1200px) .col-md.col-lg-
列（column）数
栅格系统行为
12
总是水平排列
12
12
12
开始是堆叠在一起的，当大于这些阈值时将变为水平排列
10.2 Bootstrap框架和Swiper插件 10.2.2 Swiper插件 1．如何获取
Swiper插件是一款免费且开源的JS插件，主要用在移动端的开发，
能很好地支持触摸设备上的滑动操作、支持水平和垂直的幻灯展示等诸 多操作。 2．如何使用
10.1 Web App开发基础知识
10.1.1 开发模式概述 目前，移动应用前端开发模式有Native App（原生APP）、Web App，以及由前两种开发模式融合后的Hybrid App（混合模式）。 1．Native App简述 2．Web App简述
3．Hybrid App简述
10.1 Web App开发基础知识
拟使用navbar-fixed-bottom类解 决固定在屏幕底部问题
10.3 “宇泽鲜风商城”Web App页面分析与环境准备
10.3.2 环境准备
1．安装node
2．安装fekit
3．安装git
4．如何使用
10.4 页面实现的详细过程
10.4.1 首页的实现 1．创建站点并引入各类文件 2．搭建主体框架 3．Fixedtoper区域的实现
图10-5 列表页
图10-6 详细内容页
10.3 “宇泽鲜风商城”Web App页面分析与环境准备
固定的头部区域
拟使用navbar-fixed-top类解决 固定在屏幕顶部问题 拟使用Swiper插件实现左右滑动 效果
可以上下滚动的内容区域 拟使用栅格系统解决多列布局问题
固定的底部区域 图10-6 页面结构分析
10.4 页面实现的详细过程
6．fixedfooter区域的实现
图10-14 “首页”最终预览效果
10.4 页面实现的详细过程
10.4.2 列表页的实现 1．List页面顶部区域的实现
图10-15 list页面顶部区域预览效果
10.4 页面实现的详细过程
2．列表内容的实现
图10-17 list页面内容区域预览效果
密度范围 常见屏幕分 辨率 倍率
<120dpi
已经绝迹
0.75
320×480
1倍
480×800
1.5倍
720×1280
2倍
1080×1920
3倍
1440×2560
4倍
10.2 Bootstrap框架和Swiper插件 10.2.1 Bootstrap框架 1．Bootstrap环境配置 2．栅格系统 栅格系统是一系列行（row）和列（column）构建出来的一种页面布局， 他能够随着设备屏幕的大小，自动划分为最多展示12列的内容。
图10-18 list页面最终预览效果
10.4 页面实现的详细过程
10.4.3 详细内容页的实现 1．商品价格区域的实现
图10-20 商品价格区域预览效果
10.4 页面实现的详细过程
2．商品介绍区域的实现
图10-21 商品介绍区域预览效果
图10-22 商品评价区域预览效果
10.4 页面实现的详细过程
由于此类插件都是已经调试成功的，所以在使用时只需要加载插件、
按照结构修改内容，最后初始化Swiper的流程即可使用。
10.2 Bootstrap框架和Swiper插件
图10-3 使用Swiper插件实现左右滑动效果
10.3 “宇泽鲜风商城”Web App页面分析与环境准备
10.3.1 页面分析
图10-4 首页
3．底部按钮区域的实现
图10-23 页面底部按钮区域的预览效果
10.4 页面实现的详细过程
图10-10 Google浏览器iPhone 6虚拟界面预览效果
10.4 页面实现的详细过程
4．banner区域的实现
图10-11 正在左右滑动的广告
10.4 页面实现的详细Leabharlann Baidu程
5．content区域的实现
图10-12 使用栅格系统实现2行4列排版
图10-13 content区域最终效果