CSS 移动WEB开发学习笔记

思维导图

1. 移动端基础

1.1 浏览器现状

• PC端常见浏览器
  360浏览器、谷歌浏览器、火狐浏览器、QQ浏览 器、百度浏览器、搜狗浏览器、IE浏览器。

• 移动端常见浏览器
  UC浏览器，QQ浏览器，欧朋浏览器， 百度手机浏览器，360安全浏览器，谷歌
  浏览器，搜狗手机浏览器，猎豹浏览器等
• 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核
• 兼容移动端主流浏览器，处理Webkit内核浏览器即可。

1.2 手机屏幕现状

• 移动端设备屏幕尺寸非常多，碎片化严重。
• Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有2K，4k屏。
• iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

1.3 移动端调试方法

• Chrome DevTools（谷歌浏览器）的模拟手机调试

2. 视口

• 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口

• 布局视口 layout viewport
• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元 素看上去很小，一般默认可以通过手动缩放网页。
  

2.2 视觉视口

• 视觉视口 visual viewport
• 它是用户正在看到的网站的区域。注意：是网站的区域。
• 可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
  

2.3 理想视口

• 理想视口 ideal viewport
• 为了使网站在移动端有最理想的浏览和阅读宽度而设定
• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

2.4 视口总结

• 视口就是浏览器显示页面内容的屏幕区域
• 视口分为布局视口、视觉视口和理想视口
• 移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
• 要理想视口，需要给移动端页面添加 meta视口标签

2.5 meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no,         
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• 注意：标准的viewport设置
  ①视口宽度和设备保持一致
  ②视口的默认缩放比例1.0
  ③不允许用户自行缩放
  ④最大允许的缩放比例1.0
  ⑤最小允许的缩放比例1.0

3. 二倍图

3.1 物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
• 开发时候的1px 不是一定等于1个物理像素的
• PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从 而达到更高的分辨率，并提高屏幕显示的细腻程度。

• 对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

 img{
        /*原始图片100*100px*/ 
        width: 50px; 
        height: 50px; 
    } 
.box{
        /*原始图片100*100px*/ 
        background-size: 50px 50px; 
    }

3.2 背景缩放

• background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度  背景图片高度;

• 单位： 长度|百分比|cover|contain;
  cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
  contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

3.3 多倍图切图工具

• 多倍图切图工具：cutterman，一款运行在photoshop中的插件
  

4. 移动端开发选择

4.1 单独移动端页面

• 通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
  如：淘宝，京东，苏宁

4.2 响应式兼容PC移动端

• 通过判断屏幕宽度来改变样式，以适应不同终端。制作麻烦， 需要花很大精力去调兼容性问题
  如：三星电子官网
• 市场主流的选择还是单独制作移动端页面

5. 移动端技术解决方案

5.1 移动端浏览器

• 移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
• 可以放心使用 H5 标签和 CSS3 样式。
• 浏览器的私有前缀只需要考虑添加 webkit 即可

5.2 CSS初始化

• 移动端 CSS 初始化推荐使用 normalize.css
• 官网地址: http://necolas.github.io/normalize.css/
• 好处：
  ①Normalize.css：保护了有价值的默认值
  ②Normalize.css：修复了浏览器的bug
  ③Normalize.css：是模块化的
  ④Normalize.css：拥有详细的文档

5.3 盒子模型选择

• 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
• CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding 。CSS3中的盒子模型， padding 和 border 不会撑大盒子。

/*CSS3盒子模型*/
box-sizing: border-box; 
/*传统盒子模型*/
box-sizing: content-box;

• 如何选择：
  ①移动端可以全部CSS3 盒子模型
  ②PC端如果完全需要兼容，就用传统模式，如果不考虑兼容性，就选择 CSS3 盒子模型

5.4 特殊样式

    box-sizing: border-box;
	-webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除，设置为transparent 完成透明*/ 
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ 
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

6. 移动端常见布局

• 移动端技术选型
  

6.1 流式布局

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 流式布局方式是移动web开发使用的比较常见的布局方式。

6.2 flex布局

• PC端页面布局，使用传统布局。
• 移动端或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局

6.2.1 布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。
• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成 员，称为 Flex 项目（flex item），简称"项目"。
• 注意：
  ①当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  ②伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
• 布局核心：
  就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
  

6.2.2 父项常见属性

• 轴概念
  ①默认主轴方向就是 x 轴方向，水平向右
  ②默认侧轴方向就是 y 轴方向，水平向下
  

6.2.2.1 设置主轴方向

• flex-direction 属性决定主轴的方向（即项目的排列方向）
• 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。子元素是跟着主轴来排列的
  

6.2.2.2 主轴上子元素排列方式

• justify-content 属性定义了项目在主轴上的对齐方式
• 注意： 使用这个属性之前一定要确定好主轴是哪个
  

6.2.2.3 设置子元素换行

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
  

6.2.2.4 侧轴上子元素排列方式

• align-items 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
  
• align-content 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。
  
• align-content 和 align-items 区别
  ①align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
  ②align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分
  配剩余空间等属性值。
  ③总结就是单行找 align-items 多行找 align-content
  

6.2.3 子项常见属性

6.2.3.1 flex 属性

• flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
    flex: <number>; /* default 0 */ 
}

6.2.3.2 align-self 属性

• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
• 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式  */ 
      align-self: flex-end;
 }

6.2.3.3 order 属性

• order 属性定义项目的排列顺序
• 数值越小，排列越靠前，默认为0。
• 注意：和 z-index 不一样。

.item {
    order: <number>; 
}

6.3 rem适配布局

问：

1. 页面布局文字能否随着屏幕大小变化而变化？
2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？
3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

6.3.1 rem 基础

• rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
• 而rem的基准是相对于html元素的字体大小。
  比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
• rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小

/* 根html 为    12px */ 
html {
   font-size: 12px; 
}
/* 此时    div 的字体大小就是    24px */ 
div {
    font-size: 2rem; 
}

6.3.2 媒体查询

• 媒体查询（Media Query）是CSS3新语法。
  ①使用 @media 查询，可以针对不同的媒体类型定义不同的样式
  ②@media 可以针对不同的屏幕尺寸设置不同的样式
  ③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  ④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

6.3.2.1 语法规范

• 用 @media 开头 注意@符号
• mediatype 媒体类型 如 ：screen
• 关键字 and not only
• media feature 媒体特性 必须有小括号包含

@media mediatype and|not|only (media feature) { 
    CSS-Code;
}

6.3.2.2 mediatype 查询类型

• 将不同的终端设备划分成不同的类型，称为媒体类型

6.3.2.3 关键字

• 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
  ①and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  ②not：排除某个媒体类型，相当于“非”的意思，可以省略。
  ③only：指定某个特定的媒体类型，可以省略。

6.3.2.4 媒体特性

• 每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。暂且了解三个
  
• 注意： 为了防止混乱，媒体查询要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
• 媒体查询+rem实现元素动态大小变化
  ①rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
  ②媒体查询可以根据不同设备宽度来修改样式
  ③媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

6.3.2.5 引入资源

• 当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

/* 语法 <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> */
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

6.3.3 rem 适配方案

• 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
• 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
• 步骤
  ① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
  ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

6.3.3.1 less + 媒体查询 + rem

• less + 媒体查询 + rem
• 动态设置 html 标签 font-size 大小
  ① 假设设计稿是750px
  ② 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
  ③ 一份作为html字体大小，这里就是50px
  ④ 那么在320px设备的时候，字体大小为320/15 就是 21.33px
  ⑤ 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
  ⑥ 比如我们以750为标准设计稿
  ⑦ 一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
  ⑧ 320屏幕下，html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
  ⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
• 总结
  ① 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
  ② 屏幕宽度/划分的份数 就是 html font-size 的大小
  ③ 或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

6.3.3.2 flexible.js + rem

• flexible.js + rem （推荐）
  ①不需要在写不同屏幕的媒体查询，因为里面js做了处理。
  ②原理：把当前设备划分为10等份，但是不同设备下，比例还是一致的。
  ③我们要做的，就是确定好当前设备的html 文字大小
  ④比如：当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
  ⑤里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算

flexible.js地址：https://github.com/amfe/lib-flexible

• VSCode插件推荐 ：cssrem 一个单位换算插件
  根据需要设置html字体大小基准值：
  

6.4 响应式布局

6.4.1 响应式开发原理

• 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
  

6.4.2 响应式布局容器

• 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
• 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同 屏幕下，看到不同的页面布局和样式变化。

7. Less基础

7.1 维护 css 的弊端

• CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
  ①CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
  ②不方便维护及扩展，不利于复用。
  ③CSS 没有很好的计算能力
  ④非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

7.2 Less 介绍

• Less （Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，也成为CSS预处理器。做为 CSS 的一种形式的扩展，在现有的 CSS 语法上，为CSS加入程序式语言的特性。它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本
• Less中文网址： http://lesscss.cn/

7.3 Less 安装

• 如果使用vscode无需安装less
• 安装步骤
  ①安装nodejs，网址：http://nodejs.cn/download/
  ② 检查是否安装成功，使用cmd命令（win10 是 window +r 打开 运行输入cmd） — 输入“ node –v ”查看版本即可
  ③基于nodejs在线安装Less，使用cmd命令“ npm install -g less ”即可
  ④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可
  

7.4 Less 使用

• 首先新建一个后缀名为less的文件， 在这个less文件里面书写less语句。

7.4.1 Less 变量

• 变量是指没有固定的值，可以改变的。CSS中的一些颜色和数值等经常使用。

@变量名:值;

• 变量命名规范
  ①必须有@为前缀
  ②不能包含特殊字符
  ③不能以数字开头
  ④大小写敏感

//直接使用
@color: red;
div {
    color: @color;
}

7.4.2 Less 编译

• Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
• vocode Less 插件推荐
  Easy LESS 插件用来把less文件编译为 css文件

7.4.3 Less 嵌套

• Less 嵌套写法

//  #header .logo { 
//   width: 300px; 
// }
#header {
    .logo {
       width: 300px; 
    }
}

• 如果遇见 （交集|伪类|伪元素选择器）
  ①内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
  ②如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

// a:hover{
//    color:red; 
//}
a{
  &:hover{ 
      color:red; 
}

7.4.4 Less 运算

• 任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写*/ 
@witdh: 10px + 5; 
div {
    border: @witdh solid red; 
}
/*生成的css*/ 
div {
  border: 15px solid red; 
}
/*Less 甚至还可以这样    */ 
width: (@width + 5) * 2;

• 注意：
  ①乘号（*）和除号（/）的写法
  ②运算符中间左右有个空格隔开 1px + 5
  ③对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
  ④如果两个值之间只有一个值有单位，则运算结果就取该单位

8. 补充

8.1 vw vh单位

• vw/vh是一个相对单位（类似em和rem相对单位）
  ①vw是：viewport width 视口宽度单位
  ②vh是： viewport height 视口高度单位
• 相对视口的尺寸计算结果
  ①1vw = 1/100视口宽度
  ②1vh = 1/100视口高度
• 注意：和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的。
• 使用分析：
  ①设计稿参照iPhone678，所以视口宽度尺寸是 375像素（像素大厨切换到2x模式）
  ②那么1vw = 375px / 100 = 3.75px
  ③我们元素的目标像素：50px * 50px
  ④：那么50*50 是多少个vw？：50 / 3.75 = 13.3333vw
  开发中使用vw，像素大厨把模式改为2x模式
• vw 注意事项
  ①设计到大量除法， 还是适应LESS 搭配更好点。
  ②本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了，vh很少使用。
  ③兼容性：参考网站： https://caniuse.com/