一、移动 Web 开发基础概念
1. 像素
(1) 分辨率
- 1798 x 828 像素分辨率:
横向有 828 个点,纵向有 1792 个点
(2) 物理像素
- 物理像素(physical pixel),也可以叫做设备像素(dp:device pixel)
- 实际开发中不会以物理像素为准
(3) CSS 像素
- CSS 像素,也可以叫做逻辑像素(logical pixel)、设备独立像素(dip:device independent pixel)
- 是实际开发中使用的像素
.box {
width: 200px;
height: 200px;
}
(4) 设备像素比
- 设备像素比(dpr:device pixel ratio)
- dpr = 设备像素 / CSS 像素(缩放比是 1 的情况下)
dpr = 2 表示 1 个 CSS 像素用 2x2 个设备像素来绘制
(5) 标清屏和高清屏
(6) 缩放
- 缩放改变的是 CSS 像素的大小
- 缩放——放大
- 缩放——缩小
(7) PPI / DPI
- PPI:Pixels Per Inch
- DPI:Dots Per Inch
- 每英寸的物理像素点
2. 视口 viewport
- 设置视口:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
- 获取视口宽度:
<script>
console.log(window.innerWidth);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width);
var viewWidth = document.documentElement.clientWidth || window.innerWidth;
// 兼容性问题,不要用
// console.log(screen.width);
// dpr
console.log(window.devicePixelRatio);
</script>
二、移动 Web 开发基础知识
1. box-sizing
box-sizing 的两个值:
- content-box
盒模型宽 / 高 = width / height + padding + border
(向外扩张) - border-box
盒模型宽 / 高 = width / height
(向内压缩)
2. 图标字体
- 图标字体库:iconfont-阿里巴巴矢量图标库
- 引入方式:
<i class="iconfont icon-scan"></i>
3. flex 布局
(1) 什么是 flex 布局
- Flex 是 Flexible Box 的缩写,意为"灵活的盒子"或"弹性的盒子",所以 flex 布局一般也叫作"弹性布局"
(2) flex 布局的基本概念
- flex 容器(flex container):
采用 flex 布局的元素,称为 flex 容器
.box {
display: flex | inline-flex;
}
- flex 项目(flex item):
flex 容器的所有子元素自动成为容器成员,称为 flex 项目
(只是子元素成为容器成员,孙子元素等不会成为容器成员)
- 项目默认沿主轴(main axis)排列
(3) flex 容器的属性
- display 属性
display 属性决定是否使用flex布局
flex:将对象作为弹性伸缩盒显示
inline-flex:将对象作为内联块级弹性伸缩盒显示
.box {
display: flex | inline-flex;
}
- flex-direction 属性
flex-direction 属性决定主轴的方向(即项目的排列方向)
① row(默认值):主轴为水平方向,起点在左端
② row-reverse:主轴为水平方向,起点在右端
③ column:主轴为垂直方向,起点在上沿
④ column-reverse:主轴为垂直方向,起点在下沿
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- flex-wrap 属性
默认情况下,项目都排在一条线(又称 “轴线” )上
flex-wrap 属性定义,如果一条轴线排不下,如何换行
① nowrap(默认):不换行
② wrap:换行,第一行在上方
③ wrap-reverse:换行,第一行在下方
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- flex-flow 属性
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap
.box {
flex-flow: <flex-direction>; || <flex-wrap>;
}
- justify-content 属性
justify-content 属性定义了项目在主轴上的对齐方式
① flex-start(默认值):左对齐
② flex-end:右对齐
③ center: 居中
④ space-between:两端对齐,项目之间的间隔都相等(项目与边框之间没有间隔)
⑤ space-around:每个项目两侧的间隔相等;所以,项目之间的间隔比项目与边框的间隔大一倍
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- align-items 属性
align-items 属性定义项目在交叉轴上如何对齐
① flex-start:交叉轴的起点对齐
② flex-end:交叉轴的终点对齐
③ center:交叉轴的中点对齐
④ baseline: 项目的第一行文字的基线对齐
⑤ stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
<