2021-06-04移动端布局

这几天学习移动端的小结一下：
弹性布局。display:flex 最近的练习
中用到最多的是

---

flex-direction
flex-direction:column； 这个是改变主轴的方向，主轴的方向默认是在水平上，通过这个代码可以设置为垂直。垂直后，交叉轴就在水平方向，而主轴在垂直方向。
flex-direction:row，这个是默认值，如果不写这条，默认它也是这个，即主轴在水平方向上。
flex-direction:row-reverse； 主轴反转。如主轴水平上上靠左的123 反转后 会靠右321 （严格的讲叫靠起点和靠终点，因为主轴并不一定是水平线上，如果主轴设置为了垂直方向，那主轴的起点就在上面了或下面）
flex-direction:column-reverse 交叉轴反转，垂直方向上的靠起点的123 反转后会靠 终点321

flex-wrap:nowrap 这是默认属性，默认不换行，里面的项目越来越多 容器放不下的时候就会挤压项目的宽以便于能放下。
flex-wrap:wrap 换行 ，和上面意思相反。
flex-wrap:wrap-reverse 换行，行序反转，（特别注意的是顺序不会反，）比如第一行是1234，第2二行是5678。那么反转后 第二行是1234，还是1234的顺序，不会变成4321； 第一行是5678。

justify-content:定义了项目在主轴上的对齐方式。
justify-content:flex-start 起点对齐 也是默认值
justify-content:center 这个应该是用得比较多的，居中对齐
justify-content:flex-end 主轴线终点对齐
justify-content:space-between;主轴两端对齐，项目间隔相等
justify-content:space-around;两端对齐，项目间隔是两端间隔的2倍

align-items:定义了在交叉轴上如何对齐，默认是strecth.表示在项目如果没有高度的时候。拉伸项目的高占满交叉轴。
align-items:flex-start;交叉轴起点对齐
align-items:flex-end；交叉轴终点对齐
align-items:center;交叉轴中间点对齐
align-items:baseline交叉轴内容基线对齐

align-content:定义了多根主轴线（只有换行了才会有多根主轴线）在交叉轴上的对齐方式
align-content:flex-start;在交叉轴起点对齐
align-content:flex-end;在交叉轴终点对齐
align-content:center 在交叉轴中间点对齐
align-content:space-between;在交叉轴两端对齐
align-content:space-around;交叉轴两侧间隔相等，交叉轴中间是两侧的2倍；
align-content:strecth;默认值，没有高度的项目会自动拉伸占满交叉轴。（如果有2条主轴，即换行后有2条主轴线，那么这两条轴线会平分交叉轴，一条轴上的项目没有高的项目会占满它所在轴线拥有的这一半的高）

项目的属性
order 定义了项目的排列顺序，默认都是0，属性值越小 排越靠前
flex-grow:默认是0，如果设置为flex-grow:1 刮分剩余空间 ，如果数字都是1，那么为1的都参与刮分。如果其中有一个是2，其他的是1，还有一个是0，那么为0 的不参与。为2的刮到的是为1的两倍。
flex-shrink:定义了项目缩小比例，如果剩余空间不足，那有这属性的项目会缩小。默认值是1，即空间不足的时候，大家都等比例缩小，如果设置为0，则不缩小。
align-self，拥有这个属性的项目，可以覆盖从容器继承过来的align-items交叉轴对齐方式属性。默认是auto，表示继承容器的属性。如果没 有容器。则等同于strecth;

移动端布局
移动布局基础用到flex,结合rem单位来用，rem指的是根元素即html的font-size;在设置布局的时候，比如元素的高度，不使用具体的数值，hegith:1rem;然后在html中设置font-size:20px； 那么高度是20px;而响应式布局的关键点在于，当我们所有的元素都设置以rem为单位，在响应式布局的时候，只需要在媒体查询器中根据断点设置对应的html的font-size：即可实现在不同设备大小下rem的值不一样，自然元素的高也是跟着适应。

但是更好的方案是 不用媒体查询，用JS来控制font-size.
在JS中，先获取到视口的宽度var view=document.documentElement.clientWidth; 假设我们从UI设计师那里拿到的设计稿 宽度是375px;fontsize是20px；我们来计算需要的html的fontsize；
计算公式是：fontsize=view/375*20+“px”;

所以JS代码是下面这样：

 <script>

        setRem();//加载JS进来后就执行
        window.onresize=setRem;//每次改变尺寸后执行下
        function setRem(){
            var docEl=document.documentElement;
            console.log("视口高是：",docEl.clientHeight,",视口宽是：",docEl.clientWidth);
            var view=docEl.clientWidth;
            docEl.style.fontSize=view/375*20+"px";
        }
    </script>

此时不管换成什么屏幕大小手机，窗口都会自动适配缩放

响应式布局的关键点在于响应不同的屏幕尺寸，所以如何响应不同的屏幕尺寸是重点，前面的媒体查询就能干这事。 不同断点写相应的CSS来实现不一样的布局效果。