张小龙对其的定义是无需安装, 用完即走, 实际上是需要安装的, 只不过小程序的体积特别小, 下载速度很快, 用户感觉不到下载的过程
)1M
, 否则无法通过, 在2017年4月做了改进, 由原来的1M
提升到2M
Flex
是Flexible Box
的缩写, 意为"弹性布局", 用来为盒状模型提供最大的灵活性display:'flex'
flex-direction
: 属性决定主轴的方向(即项目的排列方向).box { flex-direction: row | row-reverse | column | column-reverse; }
row(默认值): 主轴为水平方向, 起点在左端 row-reverse: 主轴为水平方向, 起点在右端 column: 主轴为垂直方向, 起点在上沿 colum-reverse: 主轴在垂直方向, 起点在下沿
flex-wrap
:定义如果一条轴线排不下,如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
nowrap(默认): 不换行 wrap: 换行, 第一行在上方 wrap-revers: 换行, 第一行在下方
flex-flow
: flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。.box { flex-flow: <flex-direction> || <flex-wrap>; }
justify-content
: 定义了项目在主轴上的对齐方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
flex-start(默认值): 左对齐 flex-end: 右对齐 center: 居中 space-between: 两端对齐, 项目之间的间隔都相等 space-around: 每个项目两侧的间隔相等, 所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items
: 定义项目在交叉轴上如何对齐.box { align-items: flex-start | flex-end | center | baseline | stretch; }
flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
: 定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。
设备独立像素(也叫密度无关像素), 可以认为是计算机坐标系统中的一个点, 这个点代表一个可以由程序使用并控制的虚拟像素
(比如: css像素, 知识android机中css 像素就不叫 "css像素"了, 而是叫 "设备独立像素"), 然后由相关系统转换为物理像素
dpr
: 设备像素比, 物理像素/设备独立像素 = dpr
, 一般以iphone6 的dpr 为准 dpr = 2
viewport
适配?<meta name="viewport" content="width=device-width,initial-scale=1.0">
为什么做 rem
适配?
机型太多, 不同的机型屏幕大小不一样
需求: 一套设计稿的内容在不同的机型上呈现的效果一致, 根据屏幕大小不同的变化, 页面中的内容也相映变化
实现:
function remRefresh() { let clientWidth = document.documentElement.clientWidth; // 将屏幕等分 10 份 let rem = clientWidth / 10; document.documentElement.style.fontSize = rem + 'px'; document.body.style.fontSize = '12px'; } window.addEventListener('pageshow', () => { remRefresh() }) // 函数防抖 let timeoutId; window.addEventListener('resize', () => { timeoutId && clearTimeout(timeoutId); timeoutId = setTimeout(() =>{ remRefresh() }, 300) })
lib-flexible + px2rem-loader