移动端布局方式

移动端布局注意点

移动端布局之弹性盒子三段式布局
01：把html，body高度设置为100%，并且以body或者#ele（外面套一个盒子）为父元素，设置为弹性盒（控制子元素的y轴排序）
02：头部为具体高度，尾部为具体高度，中间就占据剩余空间（flex：1；）
03：在中间主体部分，不能直接书写标签，而是需要添加一个容器当做父容器，是为？
04：ele宽为100vw，高为100%
05：字体大小需要重置一下，也就是把body设置为16px
注意点：假如宽度高度出现不知名的滚动条，就像把页面关掉，再打开！
弹性布局会使得定位和浮动等失效！

注意点1：就是头部的定位和input都需要设置跳转，跳转到另外的页面进行搜索或定位功能
注意点2：就是头部搜索框的设置，还有就是放大镜，这个字体图标，需要添加在form那边（内部一个span），然后定位好位置，
position: absolute;top: 50%（距离顶部50%）;transform: translateY(-50%)（需要向上走自身的一半）;
注意点：就是span需要设置字体大小为.26rem（因为量取到是26px,也就是0.26rem）

字体图标的在线：
01：把那个需要的图标添加入自己的项目
首先添加入库-购物车里面，添加到项目（第一次的时候，需要自己创建一个项目）
02：点击（暂无代码，点此生成）—生成在线的代码
03：使用link引入 例如以下：

04：添加入项目后，可以找到自己的项目，然后点击图标下面的复制代码即可

移动端布局的常见方式

（1）移动端的布局方案1：

媒体查询（修改html的字体大小）+ rem（相对于html的字体大小的倍数）

（2）移动端的布局方案2：

vw单位（就是使用vw来作为html的font-size的字体大小） + rem单位
假如设计图的大小为750px，那么dpr为2，也就是逻辑像素为350px
1 vw = 1% 视口宽度（750px中的视口宽度为350px）
推理出100vw = 350px
也就是100px = 26.67vw;
然后由于html中的字体大小设置为28.73vw（也就是100px），当你在ps量取到的像素，先处于dpr，再除于100px就是rem的值
为什么html中不能为字体大小的单位？
因为html的字体大小直接固定死了。而vw是根据视口宽度的变化，值也跟着变化。
注意点：高度的设置为rem即可，因为vw随着视口宽度的大小变化而变化。

640px设计图 -- 320px（视口宽度） 
320px = 100vw
100px = 31.25vw;

1080设计图 --- 360px（视口宽度）
360px= 100vw
100px = 27.77vw

假如正常计算出来在html设置的字体大小为26.67vw
那么逻辑像素 = 量取 / 2 / 100px = ?rem

或者
假如正常计算出来在html设置的字体大小为26.67vw 在这边直接除于2  26.67vw / 2 = 13.335vw
那么逻辑像素 = 量取 / 100px = ?rem

（3）移动端第三种方案：

rem.js + rem单位布局
01：第一步引入rem.js文件
02：需要根据设计图的大小来修改宽度（750px等）
03：cssrem插件（配置根节点的字体大小 --- ）
  文件-首选项 -设置- cssrem（搜索） -Cssrem: Root Font Size（就是设计图除于10的值）
  比如设计图为750px，那么750px/10 = 75px 640px的时候就是64px
04：重启
05：设计图中量取到的值，直接书写后，会自动帮你转化为rem值

rem.js文件的注意点：
01：需要根据设计图的大小来修改宽度（750px等）

（4）移动端的第四中方案：

Saaa + vw 布局
Sass是css的预编译语言