移动端开发必备基础知识：像素、DPR、视口、媒体查询、常用单位、FLEX布局等
基础知识
像素相关的：
- 分辨率
- 物理像素（physical pixel）也叫设备像素（dp：device pixel）
- CSS像素也叫逻辑像素（logical pixel）也叫独立设备像素（dip：device independent pixel）
- 设备像素比（dpr）（device pixel ratio）
- 标清屏和高清屏
- 缩放
- PPI/DPI
1、分辨率
1792 X 828像素：垂直方向1792个点、水平828个点
2、物理像素
分辨率的一个点就是一个物理像素，实际开发中不是以物理像素为准
3、CSS像素
- 实际开发中使用的像素
.container {
width: 200px;// css像素
}
- CSS像素和物理像素的联系
- 在标清屏（standard）中，一个css像素对应的是一个物理像素
- 在高清屏（Retina）中，一个css像素对应的是四个物理像素
- 四个物理像素代替一个物理像素去描述事物，所以高清屏幕的高分辨率效果更好
4、设备像素比
- dpr：device pixel ratio
- dpr = 设备像素 / css像素（缩放比是1的情况下，即不缩放）
- 水平方向或者垂直方向的比率
- 上述标清屏幕一个css像素是一个物理像素，所以dpr=1
- 上述高清屏幕一个css像素是4（2x2）个物理像素，所以dpr=2/1=2
- dpr = 2表示一个css像素用2x2个设备像素来绘制
5、标清屏和高清屏
- 标清屏幕dpr=1
- 高清屏幕dpr>=2
6、缩放
- 缩放的是css像素
- 比如放大至2倍，原来1x1的方块变成了2x2，视觉效果放大2倍，对应的物理像素也变成了2x2，那么一个css像素 = 2x2物理像素
- 同理缩放0.5倍，四个css像素 = 1一个物理像素
7、PPI/DPI
- 表示每英寸屏幕中物理像素的点，来表示物理像素密度
- PPI: pixels per inch
- DPI: dots per inch
- PPI是可以计算出来的：
例如一个手机是6.1英寸（对角线），1792 X 828像素分辨率
那么就可以根据勾股定理算出对角线的像素个数为n
ppi = 6.1 / n = 326ppi
视口
- 现象：如果用PC网页手机模式预览，那么会造成网页缩放严重，无法进行正常操作
- 原因：因为原PC网页宽度至少为980px，变成手机模式的三百多像素时候，会强制进行缩放，那么各模块的宽度就会变很小
- 解决方案：在html中加入viewport声明，根据设备宽度自适应：
// 写法一：可以进行宽度指定
// 写法二：指定缩放比例为1，即不缩放
// 为了兼容不容浏览器，最好写法一和写法二都写上，
// user-scalable=no, maximum-scale=1, minimum-scale=1不允许用户缩放
// 微信内置浏览器生效，即使这样声明不可以缩放，国外很多浏览器还认为用户是可以是缩放的
- 怎样获取设备的宽度？
// 方法一
window.innerWidth;
// 方法二
document.documentElement.clientWidth;
// 方法三
document.documentElement.getBoundingClientRect().width
// 浏览器兼容写法
window.innerWidth || document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width
- 怎样获取设备的dpr？
window.devicePixelRatio;
box-sizing
- PC端由于浏览器兼容性一般不使用这个属性
- 两个值content-box、border-box
- 如果设置为content-box，那么描述的宽高是内容宽高，如果加上padding或者border属性，那么就会往外扩张，会影响原始布局
- 如果设置为border-box，那么描述的宽高是加上padding和border的宽高，如果使用padding或border，内容就会往里压缩，不会影响原始布局
图标字体
- 可操控的图标，可以理解为和字体属性很像的图标库
- 阿里巴巴字体图标库：链接
媒体查询
什么是媒体查询
- 作用：媒体查询是查询屏幕类型和屏幕大小
- 示例：如果屏幕宽度超过900像素，就把北京颜色设置为red
// 如果是浏览器页面并且宽度大于900px，那么背景颜色就为红色
@media screen and (min-width:900px){
body{
background-color: red;
}
}
为什么要媒体查询
- 一套样式不可能适应各种大小的屏幕
- 根据屏幕的大小写样式
- 让我们的页面在不同大小的屏幕上都能显示
媒体的类型
- all：默认的类型，表示所有的
- screen：浏览器页面
- print：打印页面，ctrl+p打印的时候判断
- speech：针对残障人士设计的，这个一般接触不到
// 表示在打印页面上，如果宽度超过900就会变红
@media print and (min-width:900px){
body{
bgcolor:red;
}
}
媒体查询中的逻辑
- 与（and）
- 或（，）
- 非（not）
// 宽度介于1024和900之间会变红
@media screen and (min-width: 900px) and (max-width: 1024px){
body{
bgcolor: red;
}
}
// 宽度大于1024或者屏幕为浏览器屏幕并且宽度大于900会变红
// , 的优先级高于and
@media screen and (min-width: 1024px), (max-width: 900px){
body{
bgcolor: red;
}
}
// 屏幕为浏览器屏幕并且宽度大于1024或者屏幕为浏览器屏幕并且宽度大于900会变红
// , 的优先级高于and
@media screen and (min-width: 1024px), screen(max-width: 900px){
body{
bgcolor: red;
}
}
// not和and放在一起使用，等于not (screen and (min-width: 1024px) and screen(max-width: 900px))
@media not screen and (min-width: 1024px) and screen(max-width: 900px){
body{
bgcolor: red;
}
}
媒体特征表达式
1、获取宽度监听：width/max-width/min-width
2、获取DPR监听：-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
3、获取横屏还是竖屏：orientation：landscape横屏/portrait竖屏
4、监听高度，一般用不到：height
5、监听设备宽高，一般用不到：device-width/device-height screen.width/screen.height
6、监听视口的宽高比：aspect-ratio
媒体查询-策略
- 策略是指对不同屏幕的布局策略，可以理解为利用media对窗口的监听，从而使用不同的布局方式进行适配
- 根据不同的宽度进行断点区域划分
- 断点怎么来的？改变屏幕大小，当页面显示不正常时候，就需要设置断点了
- 写的原则，可以是PC first 也可以是mobile first
断点区域列表，根据测算出来：
- xs: < 576px
- sm: 576px - 768px
- md: 768px - 1200px
- xl: > 1200px
移动端的常用单位
px/%/em/rem/vw/vh
- em：根据自身的fontsize大小，移动端并不常用，首行缩进的时候可以考虑用到，缩进2em
- rem：root em，用的比较多，用来统一布局，统一缩放
- vw：视口宽度的百分之1
- vh：视口高度的百分之1
// 实现布局随着窗口大小统一缩放
setRemUnit();
window.onresize = setRemUnit;
function setRemUnit(){
var docEL = document.documentElement;
var portWidth = docEL.clientWdith;
docEL.style.fontSize = portWidth / defaultWidth * defaultFontSize + “px”;
}
FLEX布局(弹性布局)
- flixible Box
- flex容器：使用display： flex就是flex容器
- 项目：flex容器中的子元素就是项目，不包括孙子元素
- 默认主轴方向排列，即横向
Flex-容器的属性
1、display属性
- 作用：指定flex属性
- 取值：flex | inline-flex
- flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
- inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度
2、flex-direction
- 作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
- 取值：row | row-reverse | column | column-reverse
- row：默认值，主轴横向往右排列
- row-reverse：主轴横向往左反向排列
- column：垂直方向排列
- volumn-reverse：垂直方向反向排列
3、flex-wrap
- 作用：描述如果一个轴线排列不下，如何换行
- 取值：nowrap | wrap | wrap-reverse
- nowrap：默认不换行，会压缩子元素
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
4、flex-flow
- 作用：是flex-direction和flex-wrap和合并缩写形式
- 取值：flex-direction || flex-wrap
// 下方写法一和写法二效果一样：
// 写法一
.box {
flex-flow: row wrap;
}
// 写法二
.box {
flex-direction: row;
flex-wrap: wrap;
}
5、justify-content属性（justify单词的意思是两端对齐）
- 作用：属性定义了项目在主轴上的对齐方式
- 取值：flex-start | flex-end | center | space-between | space-around
- flex-start：默认的是从主轴开始位置对齐
- flex-end：默认的是从主轴结束位置对齐
- center：居中对齐，项目形成的总宽度不变
- space-between：两端对齐，中间间隔宽度一样
- space-around：所有项目的两侧间隔相等，主轴两端会留边
6、align-items属性
- 作用：定义交叉轴上的堆砌方式
- 取值：flex-start | flex-end | center | baseline | stretch
- flex-start：交叉轴的开始位置对齐
- flex-end：交叉轴的结束位置堆砌
- center：交叉轴居中
- baseline：基线对齐，文字第一行对齐
- stretch：（单词意思是弹性、拉伸）默认值！！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）
7、align-content
- 作用：定义了交叉轴线上的对齐方式
- 说明：如果项目只有一个轴线（一行），该属性不起作用，如果wrap换行了，那么才有作用
- 取值：flex-start | flex-end | center | space-between | space-around | stretch
- flex-start：所有轴线都是从头开始，交叉轴开始位置开始，主轴横轴的话，就是上对齐
- flex-end：从尾开始，交叉轴结束位置开始
- center：所有从中间开始
- space-between：多条轴线上下两端对齐
- space-around：多条轴线上下两端分散对齐，上下两侧留白
- stretch：默认!高度自动填充拉伸
Flex-项目的属性
- 项目的属性规定的是项目在flex容器中的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1、order
- 作用：定义项目的排列顺序
- 取值：integer
2、flex-grow
- 作用：定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大
- 取值：> 0
- 默认值为0，默认不会自动放大
- 如果都设置为1，那么所有项目会平分剩余的空间
- 如果有三个元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。
- 如果有三个元素，一个width设置为200，剩余都为1，那么剩余的会平分固定宽度200之外的空间
3、flex-shrink
- 作用：定义项目的缩放比例，和grow相反
- 取值：>0
- 默认值为1，默认会自动缩小
- 如果所有项目都为1，当空间不足时候，都会等比例缩小
- 如果有一个项目为0，其他都为1，当空间不足时候，0不变，1都缩小
4、flex-basis
- 作用：定义分配多余空间之前，项目占据的主轴空间，和width差不多，但是比width优先级高
5、flex
- 作用：flex-grow、flex-shrink、flex-basis的简写
- 默认值：0 1 auto
6、align-self
- 作用：允许项目有和其他项目不一样的对齐方式，可以覆盖父元素的align-items属性
- 取值：和align-items多了个auto
- 默认值为auto，表示继承align-items属性