前端开发分类

pc端开发
移动端开发
    移动 web 开发
    混合式开发(hybrid app)
    微信小程序/公众号开发

移动端适配

概念

• 默认 pc 端的网页在移动端是进行缩小展示的
• 响应式布局
• 屏幕适配（分移动端和 pc 端两个网址）

基础概念

像素

- 分辨率
    1792x828像素分辨率：横向1792个物理像素点
    分辨率越高，图像越清晰
    （同一个大小的设备，分辨率越高，一个物理像素大小越小）
- 物理像素
    也叫设备像素(dp:device pixel)
    大小由厂家生产时决定的，每一个物理像素点由红绿蓝电子显示点构成
- css 像素
    也叫逻辑像素(logical pixel)，
    也叫设备独立像素(dip:device indendent pixel) (与设备像素无关)
    实际开发中的像素
- 设备像素比
    dpr:device pixel ratio
    dpr=多少 设备像素/多少 css 像素（缩放比是1的情况下）
        (屏幕宽大小，750设备像素/375css 像素 =2)
    
    标清屏 dpr=1
    高清屏 dpr=2
    超清屏 dpr=3
    
    js 获取
        window.devicePixelRatio
- 缩放
     <meta name='viewport' content='initial-scale=1'> //缩放
     缩放改变的是 css 像素的大小（1个 css 像素由更多的物理像素表示），
     放大的话，一 css 像素能展示更多的内容
     ！！物理像素没法缩放
- ppi
    每个英寸的物理像素点(pixels per inch)
- 视口
    移动手机一般默认视口是980px，
    pc 网页在手机显示过程（先在980px 的视口里进行显示，然后进行缩放到375px 的小屏幕中）（所以会缩小）
    
    移动端开发修改视口(把视口大小调整为设备宽度)
        <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
        
        （initial-scale=1缩放比等于1 ， 等价于width=device-width）
        (user-scalable=no 禁止用户缩放，等价于maxinmum-scale=1,minimum-scale=1)
        // 有些浏览器 user-scalable=no 是无效的，所以兼容写
     获取视口宽度
         document.documentElement.clientWidth
         document.documentElement.getBoundingClientRect().width
         window.innerWidth

开发基础

• box-sizing
• 图标字体（阿里巴巴矢量图）
• flex 布局

# flex容器
    display:flex|inline-flex
# flex 项目（flex 容器所有子元素自动成为容器成员，叫 flex 项目）
# 主轴，交叉轴