前端学习Day24

一：移动端页面
今天主要是学习移动端页面的另一种写法，之前介绍了 一种vw+rem结合完成布局写移动端，而今天要说的这种方法是用插件flexible.js（一串js代码）来进行html的font-size的值的改变，用这串js代码来进行适配 。
大概步骤：
1、把html自身所带的控制视口的meta标签删除；
2、引入flexible.js
在head中添加
3、3、计算流程
若量出高度88px，88px/100=0.88rem，则高度就写为0.88rem。
注 ：可以直接在vscode中安装插件cssrem，进行以下设置：

在之后写px的时候就可以直接转化为rem。
二、写移动端页面小知识
总结：写移动端页面时先用定位和padding进行整体布局，再对每一块用弹性盒进行布局，接着对布局的每一小块写具体的样式。
注意点：
1、移动端首页上的输入框不要用input来写；
2、在写移动端首页时，字体和边框可以用单位px，其他的单位都要用rem；
3、写移动端时 ，整体布局最好用定位来写
例如：一个移动端的页面需要写header, main,footer三部分，当进行整体布局时，把header定位到顶部，把footer定位到底部，中间的main部分用padding-top和padding-bottom挤出来即可；
4、写main部分时，外面的整个布局最好套三个盒子，最外层代表main中间区，中间一层代表挤出来的显示区 ，最里面一层代表上下滚动的区域（一般移动端页面的中间内容区可以上下滚动）。
5、让中间内容区main可以上下滚动，给最外部套的中间那层盒子添加：

6、若想隐藏滚动条，假设最外部套的中间那层盒子为section标签，则添加：