移动端布局

移动端布局

一. 移动端特点

1.前置知识

1.PC端和移动端不同点
PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

2.如何在电脑里面边写代码边调试移动端网页效果
谷歌模拟器

3.屏幕尺寸
指的是屏幕对角线的长度，一般用英寸来度量

4.分辨率
PC分辨率
1920*1080：宽是1920px，从左到右有1920个像素点

物理分辨率是生产屏幕时就固定的，不可改变
逻辑分辨率是由软件(驱动)决定的
代码参考分辨率为逻辑

iPhone6/7/8
物理分辨率：750 $\times$ 1334
逻辑分辨率：375 $\times$ 667
比例：2:1

2.视口标签

能够使网页的宽度等于逻辑分辨率尺寸

<meta name="viewport" content="width=device-width, initial-scale=1.0">

自动生成的

3.百分比布局

百分比布局，也叫流式布局

效果：宽度自适应，高度固定

二.flex布局

1.特点

flex布局/弹性布局：
1.是一种浏览器提倡的布局模型
2.布局网页更简单、灵活
3.避免浮动脱标的问题
4.对低版本浏览器不兼容

2.布局模型

作用：
1.基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
2.flex布局非常适合结构化布局

设置方式：
直接父元素添加 display:flex，子元素可以自动的挤压或拉伸

组成部分：
弹性容器
弹性盒子
主轴：默认水平
侧轴：默认垂直

3.主轴对齐方式

属性：justify-content

属性值：
flex-start：默认值，起点开始依次排列
flex-end：终点开始依次排列
center：沿主轴居中排列
space-around：弹性盒子沿主轴均匀排列，空间间距均匀分在弹性盒子两侧。间距添加在子级两侧，呈现效果是中间间距是两边的二倍。
space-between：弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间，两边没有间距
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等，间距都相等

4.侧轴对齐方式

属性：
align-items：添加到弹性容器
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值：
flex-start：默认值，起点开始依次排列
flex-end：终点开始依次排列
center：沿侧轴居中排列
stretch：默认值，弹性盒子沿着主轴线被拉伸至铺满容器

5.弹性盒子尺寸特点

当侧轴对齐方式不给值或者给stretch，且子级没有高度，默认拉伸，如果有对齐方式，则为内容高度

不给宽度，就是内容宽度

6.伸缩比

占父级剩余的份数

属性：
flex：值

取值分类：
数值(整数)

注意：只占用父盒子剩余尺寸

7.修改主轴方向

主轴方向属性：flex-direction

属性值：
row：行，水平
column：列，垂直
row-reverse：行，从左向右
column-reverse：列，从下往上

8.弹性盒子换行

弹性布局子级宽度可以自动缩放。

弹性盒子换行显示：flex-wrap : wrap;

换行后有默认的对齐方式，可以调整

调整行对齐方式：align-content
取值与justify-content基本相同

三.移动适配

1.两种方案

rem：目前多数企业在用的解决方案

vw/vh：未来的解决方案

2.rem

(1)介绍

网页效果：
屏幕宽度不同，网页元素尺寸不同（等比缩放）

rem单位：
相对单位
rem单位是相对于html标签的字号计算结果
1rem=1html字号大小

(2)媒体查询

写法：

@media(媒体特性){
	选择器{
		css属性
	}
}

例如：
@media(width:320px){
	html{
		font-size:32px;
	}
}

(3)移动适配

目前rem布局方案中，将网页等分成10份，html标签的字号为视口宽度的1/10

(4)布局流程

1.确定设计稿对应的设备的html标签字号
查看设计稿宽度->确定参考设备宽度(视口宽度)->确定基准根字号(1/10视口宽度)

2.rem单位的尺寸
rem单位的尺寸=px单位数值/基准根字号

(5)flexible移动适配

flexible.js是手淘开发出的一个用来适配移动端的js框架

核心原理是根据不同的视口宽度给网页的html根节点设置不同的font-size

3.Less

(1)介绍

Less是一个css预处理器，less文件后缀是.less

扩充了css语言，使css具备一定的逻辑性、计算能力

浏览器不识别less代码，目前阶段，网页要引入对应的css文件

(2)运算

加、减、乘直接书写计算表达式
除法需要添加小括号 或 .

width:(100/4px);
height:100 ./ 4px;

(3)嵌套

作用：快速生成后代选择器

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

.父级选择器{
		//父级样式
	.子级选择器{
			//子级样式
	}
}

(4)变量

把颜色提前存储到一个容器，设置属性值为这个容器名

变量：存储数据，方便使用和修改

语法：

定义变量：@变量名:值；
使用变量：CSS属性:@变量名;

(5)导入

使用less导入写法引用其他less文件

导入：@import ‘文件路径’，一般加在less文件开头
注意空格，如果是less文件，可以省略.less

(6)导出

方法一：配置EasyLess插件，实现所有Less有相同的导出路径

配置插件：设置->搜索EasyLess->在setting.json中编辑->添加代码(注意，必须是双引号)

"less.compile": {    
    "out": "../css/"
  }

方法二：加代码

// out: ./abc/

(7)禁止导出

被别的文件导入的文件不需要导出css

在less文件第一行添加：

out:false

4.vw/vh

(1)简介

相对单位
相对视口的尺寸计算结果

vw:viweport width
1vw=1/100视口宽度

vh:viewport height
1vh=1/100视口高度