移动端

Posted 2021-11-28 xiaotaiyangye

移动布局：

　　1，移动设备 手机和ipad

　　　　安卓系统ios系统

　　　　安卓系统 内置浏览器是谷歌，iOS内置safari浏览器，他们的内核都是webkit，不考虑兼容性，需要考虑的是安卓和iOS的区别

　　2，布局

　　　　设备宽度···设备的实际大小，设备的分辨率···厂家给的

　　　　页面的大小···设计稿上的大小

　　　　浏览器的视口···浏览器自带的 通过document.documentElement.clientwidth 查看在移动设备上如果不做处理一般默认980

　　　　例子----

　　　　　　设备宽320 ，页面的宽1200 ，浏览器的视口980px   三种不统一，我们用移动端看页面，浏览器的视口会自动缩小，以100%完整展示页面，就会变得模糊不清，特别挤

　　　　　　我们需要把这三个变得统一：

　　　　　　1，移动设备宽（320）和浏览器视口宽（980）变得一致

　　　　　　　　在head之间加一个meta标签name=‘viewport’

　　　　　　　　设备宽度和浏览器视口一致时，如果页面宽大于这个数字，就会出现滚动条

　　　　　　　　var meta=document.createElement(‘meta‘)

　　　　　　　　meta.name=‘viewport‘;

　　　　　　　　meta.content=‘width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no‘;

　　　　　　　　document.head.appendChild(meta)

　　　　　　2，当移动设备和浏览器视口一致时，如果你还用传统开发，如果页面超过设备宽，超过的部分会被截掉

　　　　　　　　不能用传统的页面开发模式

　　　　　　　　a）弹性布局

　　　　　　　　b）流式布局（百分百布局）···相对父级

　　　　　　　　c）响应式布局

　　　　　　　　d）rem布局

　　　弹性布局----

　　　　　　1，分两部分---弹性父级，弹性子元素

　　　　　　2，给父级设置display：flex或inline-flex   *弹性子元素通常在弹性盒子内一行显示

　　　　　　　　flex-direction 属性　　指定了弹性子元素在父容器中的位置

　　　　　　　　　　　　row：

　　　　　　　　　　　　　　横向从左到右排列（左对齐），默认的排列方式

　　　　　　　　　　　　row-reverse：

　　　　　　　　　　　　　　反转横向排列（右对齐，从后往前排，最后一项排在最前面）

　　　　　　　　　　　　column：

　　　　　　　　　　　　　　纵向排列

　　　　　　　　　　　　column-reverse：

　　　　　　　　　　　　　　反转纵向排列，从后往前排，最后一项排在最上面

　　　　　　　　justify-content  属性　　内容对齐

　　　　　　　　　　　　flex-start：

　　　　　　　　　　　　　　弹性项目向行头紧挨着填充

　　　　　　　　　　　　flex-end：

　　　　　　　　　　　　　　弹性项目向行尾紧挨着填充

　　　　　　　　　　　　center：

　　　　　　　　　　　　　　弹性项目居中紧挨着填充

　　　　　　　　　　　　space-between：

　　　　　　　　　　　　　　弹性项目平均分布在该行上

　　　　　　　　　　　　space-around：

　　　　　　　　　　　　　　弹性项目平均分布在该行上，两边留有一半的空间间隔

　　　　　　　　align-items 属性　　设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

　　　　　　　　　　　　flex-start：

　　　　　　　　　　　　　　弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

　　　　　　　　　　　　flex-end：

　　　　　　　　　　　　　　弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

　　　　　　　　　　　　center：

　　　　　　　　　　　　　　弹性盒子元素在该行的侧轴（纵轴）上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

　　　　　　　　　　　　baseline：

　　　　　　　　　　　　　　如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参与基线对齐。　　

　　　　　　　　　　　　stretch：如果指定侧轴大小的属性值为‘auto‘，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

　　　　　　　　flex-wrap 属性　　用于指定弹性盒子的子元素换行方式。

　　　　　　　　　　　　nowrap - 默认，

　　　　　　　　　　　　　　　弹性容器为单行。该情况下弹性子项可能会溢出容器。

　　　　　　　　　　　　wrap - 弹性容器为多行。

　　　　　　　　　　　　　　　　该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

　　　　　　　　　　　　wrap-reverse -反转 wrap 排列。