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

移动端技术选型

移动端布局和我们以前学习的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里面的文字大小来改变页面中元素的大小可以整体控制
   • 媒体查询语法规范