第2章 移动Web开发基础.pptx

第2章移动Web开发基础;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;目录/Contents;屏幕分辨率和设备像素比;2.1.1屏幕分辨率;2.1.1屏幕分辨率;2.1.1屏幕分辨率;2.1.1屏幕分辨率;2.1.1屏幕分辨率;2.1.1屏幕分辨率;2.1.2设备像素比;2.1.2设备像素比;2.1.2设备像素比;2.1.2设备像素比;视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;2.2视口;CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;2.3CSS样式初始化;CSS变量;2.4.1定义CSS变量;2.4.1定义CSS变量;2.4.1定义CSS变量;2.4.1定义CSS变量;2.4.1定义CSS变量;2.4.2读取CSS变量的值;2.4.2读取CSS变量的值;2.4.2读取CSS变量的值;2.4.2读取CSS变量的值;2.4.2读取CSS变量的值;创建CSSVariable.html文件，在该文件中创建基础HTML5文档结构。;;编写页面样式，具体代码如下。;保存上述代码，在浏览器中打开CSSVariable.html文件，页面效果如下图所示。;2.4.3CSS变量值的类型;2.4.3CSS变量值的类型;2.4.3CSS变量值的类型;2.4.3CSS变量值的类型;2.4.3CSS变量值的类型;2.4.3CSS变量值的类型;2.4.3CSS变量值的类型;2.4.4在JavaScript中设置CSS变量;2.4.4在JavaScript中设置CSS变量;1.setProperty();2.getPropertyValue();3.removeProperty();2.4.4在JavaScript中设置CSS变量;;;;;;2.4.4在JavaScript中设置CSS变量;2.4.4在JavaScript中设置CSS变量;2.4.4在JavaScript中设置CSS变量;2.4.4在JavaScript中设置CSS变量;2.4.4在JavaScript中设置CSS变量;CSS预处理器;2.5.1Less;2.5.1Less;2.5.1Less;2.5.1Less;2.5.1Less;2.5.1Less;2.5.1Less;;;2.5.1Less;2.5.1Less;2.5.1Less;2.5.2Sass;Sass也是一款常用的CSS预处理器。

Sass与Less的主要区别如下。

①Sass变量以$开头，Less变量以@开头。

②Sass支持输出设置，并提供4种输出选项，分别是nested（嵌套）、compact（紧凑）、compressed（压缩）和expanded（展开），而Less不支持输出设置。

③Sass支持流程控制语法，可以使用if{}else{}、for{}等流程控制语法，而Less不支持流程控制语法。;Sass??两种语法，一种是最早的Sass语法，被称为缩进Sass（IndentedSass），以“.sass”作为扩展名；另一种语法是SCSS（SassyCSS）。本书将使用SCSS语法编写的代码（简称Sass代码）保存在扩展名为“.scss”的文件中。

由于浏览器无法直接解析Sass代码，因此需要将Sass代码先编译成CSS代码，然后将编译后的CSS代码引入网页。;在VSCode编辑器中，借助EasySass扩展可以编译Sass代码。安装该扩展后，每当保存Sass文件时，EasySass扩展会自动将Sass代码编译成对应的CSS文件。

在VSCode编辑器中搜索“EasySass”即可找到EasySass扩展，如下图所示。;1.Sass变量;2.5.2Sass;;;$nav-color:#333;

.navbar{

background-color:$nav-color;

.nav-menu{list-style:none;

li{display:inline-block;margin-right:10px;

a{

color:#f