黑马程序员技术交流社区

标题: 移动端布局 [打印本页]

作者: qiuyi 时间: 2019-9-8 22:40
标题: 移动端布局
一、Display:flex “弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
1. 父项常见属性6
• flex-direction  决定主轴的方向  flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap    定义换行情况 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow       flex-direction和flex-wrap的简写，默认row nowrap
• justify-content定义项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around 左/右对齐/居中/两端对齐/两侧间隔相等
• align-item    定义在交叉轴上的对齐方式 align-items: flex-start | flex-end | center | baseline | stretch 起点对齐/终点对齐/中点对齐/拉伸(默认值)
• align-content  定义多根轴线的对齐方式如果项目只有一根轴线，该属性不起作用
• 单行找align-items 多行找 align-content
2. 子项常见属性
a. Flex : 子项目占的份数
b. align-self : 控制子项自己在侧轴的排列方式,
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
c. Order : 属性定义子项的排列顺序（前后顺序）
二、 rem+less布局
1. em是相对于父元素字体大小,rem的基准是相对于html元素的字体大小
2. 媒体查询（Media Query）是CSS3新语法,当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
3. Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器,引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本
4. rem适配方案:
a. less+rem+媒体查询
b. flexible.js+rem
c. 两种方案现在都存在。方案2 更简单，现阶段大家无需了解里面的js代码。
rem实际开发适配方案1
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
rem 适配方案2
手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值：页面元素的px 值 / 75
剩余的，让flexible.js来去算
github地址：https://github.com/amfe/lib-flexible
总结：
因为flexible是默认将屏幕分为10等分
但是当屏幕大于750的时候希望不要再去重置html字体了
所以要自己通过媒体查询设置一下
并且要把权重提到最高
VSCode px 转换rem 插件 cssrem
因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置

三、流式布局(百分比布局)
四、响应式布局
五、box-sizing: border-box
1. 默认值: content-box: 设置元素宽度100px,元素内容为100px,边框以及内边距的宽度都会被增加到最后绘制出来的元素宽度中
2. Border-box: 边框和内边距的值是包含在width内的,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2