前端之移动端布局--移动端的特点-百分比布局-flex布局--less--vw/vh--响应式布局

移动端布局

一、移动端的特点

pc端网页和移动端网页有什么不同
pc屏幕大网页固定版心
手机屏幕小 网页宽度多数为100%
移动端分辨率的特点：
目标：了解屏幕尺寸概念




写代码时 参考逻辑分辨率

添加 视口标签 屏幕的宽度 与逻辑分辨率相同

二倍图

设计给750的二倍图（让图片分辨率更高些 不让图片逻辑失真）写代码时使用相关软件进行调试得到合适的尺寸

二、百分比布局（古老的布局方式）

三、flex布局（重点！）

简介

flex布局/弹性布局
1.是一种浏览器提倡（加载速度快 渲染速度高）的布局模型
2.布局页面更简单、灵活
3.避免浮动投标的问题

作用：
基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
flex布局非常适合结构化布局
设置方式：
父元素添加display：flex 子元素可以自动的挤压或拉伸
组成部分：
弹性容器
弹性盒子
主轴（默认主轴在水平）
侧轴/交叉轴（默认侧轴在垂直）

justify-content 主轴对齐方式

align-items 侧轴对齐方式

align-self:控制某个弹性盒子在侧轴方向上的对齐方式
没有给宽时默认为内容的宽度
没有给高度使默认为streach（拉伸）布局 占满父级高度

flex-direction改变元素的排列方向

思考：flex布局模型中，弹性盒子默认沿着哪个方向排列
答：水平方向
思考：如何实现内容垂直排列

flex-主轴方向和对齐方式

当主轴方向为列时
flex-direction:column;
实现盒子水平居中：
align-items：center;
实现盒子垂直居中:
justify-content:center;

当主轴方向为行时
flex-direction:row;
实现盒子垂直居中:
align-items：center;
实现盒子水平居中：
justify-content:center;

flex-wrap实现弹性盒子多行排列效果

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

调整行的对齐方式 align-content

取值与justify-content相同
align-content：center；
align-content：space-around；
align-content：space-between；

四、移动适配rem

网页元素的宽度和高度 都要随着窗口的变化而不变化

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

目标：能使用rem单位设置网页元素的尺寸
网页效果：
屏幕宽度不同 网页元素尺寸不同（等比缩放）
rem单位
1.相对单位
2.rem单位是相对于HTML标签字号计算效果
3.1rem=1HTML字号大小

1.媒体查询
思考：手机屏幕大小不同，分辨率不同 如何设置不同的html标签字号
答：添加媒体查询
媒体查询 能够检测视口的宽度 然后编写差异化的css样式
写法：
@media（媒体特性）{
选择器{
css属性
}
}

目前rem布局方案中 将网页等分成10fen HTML标签的字号为视口宽度的1/10
实现在不同宽度的设备中 网页元素尺寸等比缩放效果

思考：
工作中 书写代码的尺寸要参照设计稿尺寸 设计稿中是px还是rem
如何确定rem的数值
1.确定设计稿对应的设备的HTML标签字号
查看设计稿宽度->确定参考设备宽度（视口宽度）->确定基准根字号（1/10视口宽度）
rem单位尺寸
rem的单位的尺寸=px单位数值/根准基字号
2.flexible.js

五、 less

目标：使用less运算写法完成px单位到rem单位的转换
使用less语法快速编译生成css代码
less是一个css预处理器，less文件后缀是.less
扩充了css语言 使css具备一定的逻辑性，计算能力
注意：浏览器不识别less代码 目前阶段 网页要引入对应的css文件

注释：

单行注释
语法：// 注释内容
快捷键：ctrl+/
块注释
语法：/*注释内容*/
快捷键：shift+alt+A

运算

运算：加、减、乘直接书写计算表达式
除法需要添加小扣号或 .
优先 (68/37.5rem)或者68./37.5rem

使用less语法生成后代选择器

思考：书写css选择器时 如何避免样式冲突
目标：能使less嵌套写法生成后代选择器
嵌套：
作用：快速生成后代选择器
语法：
.父级选择器{
//父级样式
.子级选择器{
//子级样式
}
}
注意：&不生成后代选择器 表示当前选择器 通常配合伪类或伪元素使用

使用less变量设置属性值

变量
思考：
网页中，文字文字颜色基本都是统一的，如果网站改版，变化文字颜色，如何修改代码？
方法：把颜色提前存储到一个容器，设置属性值这个容器名
变量：存储数据 方便使用和修改
语法：
定义变量：@变量名：值;
使用变量：css属性：@变量名；

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

思考：开发网站是，网页如何引入公共样式：
css：书写link标签
less：导入

导入：@import “文件路径”; 一般加在开头位置

使用less语法导出css文件

思考：目前，less文件导出的css文件位置是哪里
方法一：
配置Easyless插件 实现所有less有相同的导出路径
配置插件：设置–>搜索Easyless–>在setting.json中编辑–>添加代码（注意，必须是双引号）
问题：都在相同的文件夹中进行导出
方法二：
在要导出less文件首行添加
//out:导出路径

注意 禁止导出 在less文件第一行添加 //out:false

六、 vw/vh未来的解决方案

目标：
能够使用vw单位设置网页元素的尺寸

相对单位
相对视口的尺寸计算结果
vw:viewport width
1vw=1/100视口宽度
vh:viewport width
1vh=1/100视口高度

开发时 只用vw/vh 不能vw 、vh混用设置宽高 对全面屏不友好

七、响应式布局

能够根据设备宽度的变化，设置 差异化样式

媒体查询

开发常用写法：
媒体特性常用写法：
max-width（小于等于）
min-width （大于等于）
媒体查询书写顺序
min-width(从小到大)
max-width(从大到小）

link标签中引入媒体查询

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)"  href="xx.css">