写移动端时所需要的知识

文章目录 

​

• 一、写移动端所具备的基础知识：伸缩布局 ​​​
• 二、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- 类