Bootstrap响应式Web开发第2章 移动Web开发基础（上）.pptxVIP

第2章 移动Web开发基础（上）《Bootstrap响应式Web开发》学习目标/Target 掌握视口的基本概念和使用方法 掌握移动Web页面的样式编写方法 理解分辨率和设备像素比的概念 掌握二倍图的使用方法 掌握SVG矢量图的使用方法章节概述/ Summary在熟悉了Bootstrap框架和移动Web开发的基本概念后，本章将对移动Web开发的基础知识进行详解。本章内容主要包括视口、移动端Web页面的样式的编写、分辨率、设备像素比、二倍图和SVG矢量图等。其中，移动端页面的显示效果与移动端设备的视口有关，在移动端页面可以通过meta标签设置理想视口。在开发时还需要注意移动端设备的屏幕分辨率适配问题，以及图片的显示问题。目录/Contents01视口移动Web页面的样式编写02分辨率和设备像素比二倍图03SVG矢量图04052.1视口2.1.1 什么是视口视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。视口主要包括布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。2.1.1 视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。布局视口2.1.1 视口布局视口的默认宽度有可能是768px、980px或1024px等（取决于不同移动端设备的设置），这个宽度并不适合在手机屏幕中展示。当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。2.1.1 视口视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。视觉视口2.1.1 视口理想视口是指对设备来讲最理想的视口尺寸，效果如图所示。理想视口2.1.1 视口采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。在开发中，为了实现理想视口，需要给移动端页面添加meta标签配置视口，通知浏览器来进行处理。为了方便对不同屏幕尺寸的设备进行适配，PC端的Chrome浏览器在开发者工具中加入了模拟移动端屏幕的功能，可以模拟各种手机的显示效果。利用Chrome浏览器模拟手机屏幕，来观察移动端屏幕的显示效果，可以帮助我们更好地理解视口。2.1.2 利用Chrome浏览器模拟手机屏幕初始页面效果编写HTML代码创建demo01.html，并定义div标签和img标签。其中，img标签引入的图片素材picture1.jpg文件。编写页面样式使用类选择器.title获取元素，将字体大小设为20px，字体颜色设为红色。查看页面效果PC端页面显示效果在浏览器打开demo01.html，查看页面显示效果。2.1.2 利用Chrome浏览器模拟手机屏幕编写HTML结构代码，实现页面结构。例2-1：利用Chrome浏览器模拟手机屏幕HTML代码body div?class=title新款Android手机/div img?src=picture1.jpg?alt=/body2.1.2 利用Chrome浏览器模拟手机屏幕编写CSS样式代码，实现页面样式。例2-1：利用Chrome浏览器模拟手机屏幕CSS代码style .title?{ font-size:?20px; color:?red; }/style2.1.2 利用Chrome浏览器模拟手机屏幕通过浏览器打开demo01.html，查看页面运行效果。PC端页面显示效果2.1.2 利用Chrome浏览器模拟手机屏幕查看iPhone/6/7/8启动开发者工具在浏览器显示的页面中，单击鼠标右键，然后在弹出菜单中选择“检查”命令启动开发者工具（也可以直接按F12快捷键）。启动开发者工具单击切换按钮单击开发者工具面板左上角的第2个按钮，进入到移动端设备调试功能。查看iPhone 6/7/8进入后，会看到页面整体缩小了，并且在页面的顶部出现了设备的名称（如iPhone 6/7/8）。查看移动端设备显示效果2.1.2 利用Chrome浏览器模拟手机屏幕查看页面宽度单击Elements在浏览器的控制台中，找到Elements面板，并单击。查看页面宽度将鼠标指针放在Elements面板中的html标签上，会看到浏览器显示了当前页面的宽度为980px 。查看页面宽度2.1.3 利用m