70 lines
1.7 KiB
Plaintext
70 lines
1.7 KiB
Plaintext
1：媒体查询（响应式开发）
|
||
|
||
2：弹性盒子 + rem（手机网站的尺寸单位）
|
||
|
||
|
||
为什么需要？？？？
|
||
|
||
以前的做法：写一个pc网站，然后通过 媒体查询 技术，来兼容 pc 和 手机
|
||
媒体查询：实时检测屏幕的宽度变化，然后显示或者隐藏网页上的元素，让pc网站适配手机
|
||
|
||
现在的做法：写两个网站，一个pc，一个手机网站
|
||
|
||
pc网站
|
||
|
||
手机网站
|
||
|
||
|
||
rem:
|
||
相对的尺寸单位，为了实现尺寸上的兼容
|
||
|
||
|
||
1.875rem 你写的尺寸（rem） * html上font-size = 真实的尺寸 160px
|
||
|
||
html上font-size 需要动态去变化的
|
||
那如何变化？
|
||
|
||
媒体查询
|
||
|
||
js
|
||
|
||
|
||
弹性盒子：
|
||
|
||
布局兼容
|
||
|
||
有两个轴 ，主轴x 和 交叉轴 y
|
||
|
||
13个css属性：
|
||
|
||
7个在父元素上：
|
||
|
||
display: flex 开启弹性盒子
|
||
|
||
|
||
flex-direction 改变默认的排列方向 row column，注意 如果设置了 column，那么 align-items 和
|
||
justify-content 作用相反
|
||
|
||
flex-wrap 排不下换行（注意，子元素自己加宽度）
|
||
justify-content 设置水平居中
|
||
align-items 垂直居中
|
||
|
||
align-content 设置多行结构的 垂直居中
|
||
|
||
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
|
||
|
||
|
||
|
||
6个在子元素上：
|
||
|
||
flex-grow 定义元素的放大比例，数值越大占比越大
|
||
flex 一般设置一个数值，实际作用约等于 flex-grow
|
||
|
||
flex-shrink 定义元素的缩小比例，0 不缩放 1 默认缩放
|
||
|
||
order 排列顺序，数值越小越靠前
|
||
|
||
|
||
flex-basis
|
||
|
||
align-self 允许某个元素脱离 align-items 的规则来对齐 |