响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）课件 第7章 移动Web屏幕适配.pptx

第7章移动Web屏幕适配《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target了解屏幕分辨率和设备像素比，能够说出屏幕分辨率的概念和设备像素比的计算方式了解视口，能够说出视口的设置方法掌握媒体查询的使用方法，能够根据实际情况灵活定义媒体查询掌握二倍图的使用方法，能够灵活使用二倍图在高分辨率设备中显示清晰的图像

学习目标/Target掌握rem单位的使用方法，能够使用rem单位根据根元素的字号设置元素的大小熟悉rem适配方案，能够归纳使用媒体查询结合rem单位与使用flexible.js结合rem单位实现屏幕适配的区别掌握Less的使用方法，能够定义变量、使用嵌套语法简化代码、进行基本运算、注释代码、导入和导出Less文件掌握流式布局的使用方法，能够使用流式布局实现宽度自适应

学习目标/Target掌握vw单位和vh单位的使用方法，能够使用vw单位与vh单位根据视口的变化自动设置元素的大小掌握线上问诊页面的制作方法，能够完成线上问诊页面的开发掌握音乐屋首页页面的制作方法，能够完成音乐屋首页页面的开发

章节概述/Summary随着移动设备和互联网技术的快速发展，移动Web开发技术应运而生，并成为当下非常流行的技术之一。为了提供良好的用户体验，开发人员在构建适用于不同移动设备的Web应用程序时，需要灵活运用适配技术和最佳实践。在移动Web开发中，屏幕适配起着关键作用。开发人员需要了解屏幕分辨率、设备像素比和视口等概念，并利用媒体查询技术进行样式适配。此外，开发人员还需要掌握处理高清图像素材和实现响应式布局等的技巧。本章将详细讲解移动Web屏幕适配的相关知识。

目录/Contents7-17-2线上问诊页面音乐屋首页页面

线上问诊页面项目7-1

项目需求随着生活节奏的加快，人们面临越来越多的生活和工作方面的压力，健康问题逐渐引起人们的关注。然而，传统的问诊模式需要耗费大量时间和精力：需要排队等候、填写烦琐的问诊表格，还需要费心找到合适的专家。基于这个背景，某公司正在开发一个线上医疗项目，目前正在进行线上问诊页面的开发。在该页面上，用户能够在线咨询医生，获取医疗建议和诊断结果，体验更为便捷和高效的医疗服务。

项目需求本项目需要基于上述需求实现线上问诊页面的开发，线上问诊页面效果如下图所示。

知识储备先定一个小目标！了解屏幕分辨率和设备像素比，能够说出屏幕分辨率的概念和设备像素比的计算方式1.屏幕分辨率和设备像素比

知识储备1.屏幕分辨率和设备像素比随着移动设备的普及以及多样化，开发人员面临着一项重要的任务：为移动应用适配各种屏幕尺寸和分辨率，以确保移动应用在不同设备中都能够提供良好的用户体验。下面将对屏幕分辨率和设备像素比进行详细讲解。

知识储备1.屏幕分辨率和设备像素比（1）屏幕分辨率屏幕分辨率是指一块屏幕上可以显示的像素数量，通常以px为单位来衡量。例如，1920×1080的分辨率表示屏幕在水平方向上含有1920个像素，在垂直方向上含有1080个像素，通过将两者相乘，可知屏幕上总共含有2073600个像素。

知识储备1.屏幕分辨率和设备像素比在屏幕尺寸相同的情况下，具有较高分辨率的屏幕通常可以显示更多的像素，因此它具有更高的像素密度。高像素密度的屏幕能够呈现更多的细节，使图形和文本显示更加清晰和精细，因此这种屏幕通常可以呈现更加细腻和逼真的动画。低像素密度的屏幕可能会显示出较大的像素颗粒，这会使图像和文本显示不够清晰和精细，从而影响观感和识别度。因此，当考虑屏幕质量和显示效果时，分辨率是一个重要的考虑因素。

知识储备1.屏幕分辨率和设备像素比下面演示在屏幕尺寸相同的情况下，高分辨率屏幕与低分辨率屏幕所显示的图像的差异，如下图所示。可以看出，高分辨率屏幕显示的图像比较精细，而低分辨率屏幕显示的图像有颗粒感。

知识储备1.屏幕分辨率和设备像素比随着屏幕技术的进步，屏幕分辨率也在不断提高，这导致了一些早期设计的软件在高分辨率屏幕上显示过小的问题。导致该问题的原因是一些早期软件的宽度、高度、字号等都是固定的，这些软件适用于低分辨率屏幕，用于高分辨率屏幕时就显得非常小。为了解决这个问题，操作系统会自动将屏幕画面进行放大，使早期软件在高分辨率屏幕上也能以合适的大小显示。然而，由于屏幕画面被操作系统放大，软件识别的屏幕分辨率和实际的屏幕分辨率会有所差异。为了方便区分，将实际的屏幕分辨率和像素称为物理分辨率和物理像素，而将软件识别的屏幕分辨率和像素称为逻辑分辨率和逻辑像素。物理分辨率是屏幕的硬件特性，是