文章目录
- 一、写移动端所具备的基础知识：伸缩布局
- 二、rem和px之间的转换和方式、媒体查询
- 1.rem和em
- 2、less
- 3、less的使用
- 4、rem的适配
- 5、媒体查询
- 三、响应式布局
前言
随着前端行业的发展，现在在市场上写手机端移动端的情况比较多
提示：以下是本篇文章正文内容，下面案例可供参考
1、写移动端所具备的基础知识：伸缩布局
写移动端伸缩布局的知识是必须掌握的，总结来说：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
首先要掌握的：父项的常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction和flex-wrap（不建议初学者使用）
flex-direction：设置主轴的方向
- row ：默认从左到右
- row-reverse：从右到左
- column：从上到下
- column-reversr：从下到上
justify-content：设置主轴上的子元素排列方式
- flex-start：默认从头部开始 如果主轴是x轴，则从左到右
- flex-end：从尾部开始排列
- center：从主轴居中对齐
- space-around：平分剩余空间
- space-between：先两边贴边 ， 在平分剩余空间
flex-wrap：设置子元素是否换行
- nowrap 不换行
- wrap 换行
align-items：设置侧轴上的子元素排列方式（单行）
- flex-start 从头部开始
- flex-end 从尾部开始
- center 居中显示
- stretch 拉伸
align-content：设置侧轴上的子元素的排列方式（多行）
- flex-start：默认从头部开始 如果主轴是x轴，则从左到右
- flex-end：从尾部开始排列
- center：从主轴居中对齐
- space-around：平分剩余空间
- space-between：先两边贴边 ， 在平分剩余空间
二、rem和px之间的转换和方式、媒体查询
1.rem和em
em也是一个相对单位，基准是参照父元素字体大小。
rem (root em)是一个相对单位，基准是相对于html元素的字体大小。
2.less
Less是一门 CSS 预处理语言，它扩展了CSS的动态特性,
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本。
就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
less的安装和使用在上课时老师会说到以及less的插件
3、less的使用
less在设置它的变量时的规范：
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
less可以嵌套、&号拼接、加减乘除运算。
4、rem的适配
第一种：页面元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的份数）或者 页面元素的rem值 = 页面元素值（px） / html font-size 字体的大小
屏幕宽度 / 划分的份数就是HTML的font-size的大小
第二种：用手机淘宝团队出的简洁高效 移动端适配库一个JS文件，它里面的原理是将设备划成10份；这样就只需要修改html文字大小。
5、媒体查询
媒体查询是CSS3新语法。使用这个可以针对不同的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式。
媒体查询语法规范：
- 用@media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
媒体查询类型：
- all 用于所有设备
- print 用于打印机和打印预览
- screen 用于电脑屏幕、平板和手机终端
关键字：
- and：可以将多个媒体特性连接到一起，相当于”且“的意思
@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/
}
- not：排除某个媒体类型，相当于”非“的意思，可以省略
@media not print and (max-width: 1200px){样式代码}
- only： 指定某个特定的媒体类型，可以省略
@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/
}
三、响应式布局
1、响应式开发原理和布局容器
- 原理：就是使用媒体查询针对不同宽度的设备进行布局和 样式的设置，从而适配不同设备的目的
- 容器尺寸划分：超小屏幕（手机，小于768px）；小屏幕（平板，大于等于768px）；中等屏幕（桌面显示器，大于等于992px）；大屏幕（大桌面显示器，大于等于1200px）
2、Bootstrap
bootstrap是写响应式的一个网站
Bootstrap使用步骤：
- 新建index.html
- 把官网上提供的基本模板粘贴过来
- 把bootstrap中预设的标签样式复制过来
- 根据项目的实际需求做相应的修改
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类，container 页面有留白 container-fluid 没有留白。
3、bootstrap栅格系统
- 按照不同屏幕划分为1~12 等份
- 行（row） 可以去除父容器左右15px的边距
- xs：超小屏幕 ；sm 小屏幕； md 中等屏幕； lg是大屏幕
- 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右15像素的 padding
- 可以同时为一列指定多个设备的类名； class="col-md-4 col-sm-6"
4、列偏移
col-md-offset- 类 向右偏移，实际上是为当前元素增加左边距
5、列排序
col-md-push- 和 col-md-pull- 类
