移动端笔记

meta视口标签

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

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no ( 1或0)

多倍图

• 对于一张50px*50px的图片,在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
• 通常使用二倍图，因为iPhone 6\7\8的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求
• 背景图片 注意缩放问题

/* 在 iphone8 下面 */
img {
	/*原始图片100*10Opx*/
	width: 5Opx;
	height: 50px;
.box {
	/*原始图片100*100px*/
	background-size: 50px 50px;

背景缩放background-size

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

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

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

CSS初始化normalize.css

移动端CSS初始化推荐使用normalize.css/

• Normalize.css：保护了有价值的默认值
• Normalize.css：修复了浏览器的bug
• Normalize.css：是模块化的
• Normalize.css：拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

特殊样式

/*CSS3盒子模型*/
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;
}

流式布局(百分比布局)

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

<section>
	<div></div>
	<div></div>
</section>

section {
	width: 100%;
	max-width: 980px;
	min-width: 320px;
	margin: 0 auto;
}
section div {
	float: left;
	width: 50%;
	height: 400px;
}
section div:nth-child(1){
	background-color: pink;
}
section div:nth-child(2){
	background-color: purple;
}

常用初始化样式

body {
	margin: 0 auto;
	min-width: 320px;
	max-width: 640px;
	background: #fff;
	font-size: 14px;
	font-family: -apple-system,Helvetica,sans-serif;
	line-height: 1.5;
	color: #666;
}

flex布局布局原理

采用Flex布局的元素，称为Flex容器( flex container )，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。

• 体验中div就是flex父容器。
• 体验中span就是子容器flex项目子容器可以横向排列也可以纵向排列
  总结flex布局原理:
  就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

flex-direction设置主轴的方向 ★

1. 主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有︰行和列、x轴和y轴

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

2. 属性值

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

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content设置主轴上的子元素排列方式 ★

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

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐(如果主轴是x轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间(重要)

flex-wrap设置子元素是否换行 ★

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

属性值	说明
nowrap	默认值，不换行
wrap	换行

align-items设置侧轴上的子元素排列方式 ( 单行 )

该属性是控制子项在侧轴 ( 默认是y轴 ) 上的排列方式 在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸（默认值)

align-content设置侧轴上的子元素的排列方式 ( 多行 )

设置子项在侧轴上的排列方式并且只能用于子项出现 换行 的情况 ( 多行 ），在单行下是没有效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头,再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow: row wrap;

flex布局子项常见属性

flex属性 ★

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

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

align-self 控制子项自己在侧轴上的排列方式

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

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

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。
注意：和z-index不一样。

rem 单位

rem (root em)是一个相对单位，类似于em , em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素( html )设置font-size=12px;非根元素设置width: 2rem;则换成px表示就是24px。

媒体查询

什么是媒体查询

媒体查询( Media Query )是CSS3新语法。

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

语法规范

@media mediatype and|not|lonly (media feature) {
	css-Code;
}

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

1. mediatype查询类型

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

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

2. 关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

• and : 可以将多个媒体特性连接到一起，相当于“且”的意思。
• not : 排除某个媒体类型，相当于“非”的意思，可以省略。
• only : 指定某个特定的媒体类型，可以省略。

3. 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

引入资源（理解)

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

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

Less基础

Less 介绍

Less (Leaner Style Sheets 的缩写）是一门CSS扩展语言，也成为CSS预处理器。
做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS的语法基础之上，引入了变量，Mixin（(混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址: http://lesscss.cn/
常见的CSS预处理器: Sass、Less、Stylus
一句话 : Less是一门CSS预处理语言，它扩展了CSS的动态特性。

Less变量

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

@变量名: 值;

变量命名规范

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

Less 编译

vocode Less 插件 ★
Easy LESS插件用来把less文件编译为
css文件
安装完毕插件，重新加载下vscode。
只要保存一下Less文件，会自动生成CSS文件。

Less嵌套

我们经常用到选择器的嵌套

#header .logo {
	width: 300px;
}

Less嵌套写法

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

如果遇见（交集|伪类|伪元素选择器)

• 内层选择器的前面没有&符号，则它被解析为父选择器的后代;
• 如果有&符号，它就被解析为父元素自身或父元素的伪类。

a:hover {
	color: red;
}

Less嵌套写法

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

Less运算★

注意：

• 乘号( * )和除号( / )的写法
• 除法用 ./ 或括号括起来除(10px / 2)（推荐）
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

rem适配方案

1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

动态设置html标签font-size大小

1. 假设设计稿是750px
2. 假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
3. 每一份作为html字体大小，这里就是50px
4. 那么在320px设备的时候，字体大小为320/15就是21.33px
5. 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
6. 比如我们以750为标准设计稿
7. 一个100*100像素的页面元素在 750屏幕下，就是100 / 50转换为rem 是 2rem * 2 rem 比例是1比1
8. 320屏幕下，html字体大小为21.33 则2rem = 42.66px 此时宽和高都是42.66 但是 宽和高的比例还是1比1
9. 但是已经能实现不同屏幕下页面光素盒子等比例缩放的效果

元素大小取值方法

1. 最后的公式︰页面元素的rem值 = 页面元素值( px ) / （屏幕宽度 / 划分的份数)
2. 屏幕宽度 / 划分的份数 就是html font-size的大小
3. 或者：页面元素的rem值 = 页面元素值( px ) / html font-size字体大小

设置公共common.less文件

1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
2. 我们关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3. 划分的份数我们定为15等份
4. 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体盘小为50px，注意这句话写到最上面

新建index.less文件

1. 新建index.less这里面写首页的样式
2. 将刚才设置好的common.less 引入到index.less里面语法如下：

// 在 index.less 中导入 common.less 文件
@import "common";

3. 生成index.css 引入到index.html里面

简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以
里面页面元素rem值 : 页面元素的px值 / 75
剩余的，让flexible.js来去算

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