关于移动端开发，你必须要知道的技巧

 

移动端

1.1移动端视口问题

概述：移动端开发的时候需要加上meta标签。但是除了那一个常用的meta标签以外还有很多形式的meta标签；

1.2 百分比布局

子元素的宽度、补白、外边距的数据参照的是父元素的宽度的百分比;外边框的数据是没有百分比。

box-sizing:border-box:让元素向内坍塌【坍塌的数据和外边框、补白有关系，和margin没有关系】

1.3 flex布局

概述：flex布局主要的作用是可以在移动端中快速写布局格式:

容器属性：flex-wrap:wrap【换行】 jusitify-content：center【水平居中】  align-items:center【垂直居中】

项目属性：flex-grow：0 【分剩余空间】 flex-shrink：1【如果剩余空间不足、自动缩小】

1.4 rem布局

概述：rem是一个相对单位，相对的是html根标签

媒体布局

概述：媒体布局又称【响应式布局】，它的实现原理是link标签新增了一个属性media；

注意：就是在不同的条件下写不同样式；

<