移动端技术选型知识点总结

移动端技术选型

移动端布局和我们以前学习的PC端有所区别：

一.单独制作移动端页面(主流)

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

2. flex弹性布局(强烈推荐)
   ●flex布局原理 : 就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
   ● 常见父项属性，以下由6个属性是对父元素设置的

   • flex-direction :设置主轴的方向
   • justify-content :设置主轴上的子元素排列方式
   • flex-wrap :设置子元素是否换行
   • align-content :设置侧轴上的子元素的排列方式(多行)
   • align-items :设置侧轴上的子元索排列方式(单行)
   • flex-flow :复合属性,相当于同时设置了flex-direction和flex- wrap

3. less+rem+媒体查询布局

   • em单位是相对于父元素的字体大小
   • rem单位是相对于html元素的字体大小
   • rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
   • 媒体查询语法规范

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

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

rem适配方案技术使用（市场主流）

技术方案1：

• less
• 媒体查询
• rem

技术方案2：

• flexible.js
• rem

元素大小取值方法

• 页面元素的rem值 = 页面元素值(px) / （屏幕宽度/划分的份数）
• 屏幕宽度 / 划分的份数 就是 html font-size 的大小
• 或者 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

4. 混合布局

二.响应式页面兼容移动端(其次)

• 媒体查询

  • 平时我们的响应式尺寸划分
  • 超小屏幕 （手机，小于768px）：设置宽度为100%
  • 小屏幕 （平板，大于等于768px）：设置宽度为750px
  • 中等屏幕 （桌面显示器，大于等于992px）：宽度设置为970px
  • 大屏幕 （大桌面显示器，大于等于1200px）：宽度设置为1170px

• bootstrap