1

一. 像素

  1. 屏幕分辨率
    指在横纵坐标的像素点,单位是 px,1px = 1 像素点
    iphone6 750*1334
    屏幕像素密度:屏幕上每英寸可以显示的像素点的数量
    屏幕分辨率,像素密度都是设备厂商规定的,不能修改


  2. 像素
    物理像素:任何设备的物理像素的数量都是固定的,它是屏幕能显示的最小粒度。
    CSS像素: CSS 像素是一个抽象的单位,主要用于浏览器确定 Web 页面的内容。
    在普通屏下,一个 CSS 像素对应一个设备像素

    CSS 像素与 物理像素的关系:

       1. 屏幕特性
       2. 用户缩放的行为
    

二. 视口

    1. layout viewport(布局视口)
      它是一个容器,用来装下 PC 端的页面
      默认的布局视口都是 980, IE 是1024
      一般移动端的页面有两套方案,一是写两套页面,一个是响应式布局。
    2. 视觉视口
      视觉视口与设备屏幕的区域一样宽,像素值是 CSS 像素决定的。
    3. 理想视口
      布局视口的默认宽度并不是一个理想的宽度,对于移动设备来说,最理想的情况是用户进入界面不再进行缩放。只有专门为移动设备开发的网站,才有理想视口这么一说

       <meta name="viewport" content="width=device-width"/>

      width:布局视口的宽
      device-width:设备独立像素的值

      当加上 meta,设备独立像素 = CSS 像素 = 375

      没有 meta:

        物理像素: 750
        设备独立像素:375
        CSS 像素:980
        同一个元素,在不同的设备上,呈现的效果一样,等比
      

      有 meta:

        物理像素: 750
        设备独立像素:375
        CSS 像素:375
        同一个元素,在不同的设备上,呈现的效果不一样,不等比
      

      dpr(像素比) = 物理像素/设备独立像素

    1. 移动端缩放:布局视口永远不变

        放大:CSS3 像素面积变大,元素像素值不变,视觉视口反而是变小了
        从技术层面上来讲,缩放就是放大或缩小 CSS 像素面积的过程,改变的是视觉视口的尺寸。
        
      

    三. 事件

    1. 手指按下
    ontouchstart
    2. 手指移动
    ontouchmove
    3. 手指离开
    ontouchend
    
    取消浏览器的默认行为
    document.addEventListener("touchstart", function(event) {
        event.preventDefault()
    })
    
    移动端的准备工作:
        1. meta标签
        2. 清除默认样式
        3. 清除系统滚动条
        4. 取消默认行为
        5. 适配
        6. 点透处理
                                                                                        
    
    点透处理方案:
        1. 让 a 元素不能进行跳转,禁止浏览器的默认行为
        2. box 盒子消失,点击 a 元素,a 元素该去跳转
        
        document.addEventListener("touchstart", function(){
            event.preventDefault()
        })
        
        var aTags = document.querySelectorAll('a')
        
        for (var i = 0;i < a.length;i++) {
            aTags[i].addEventListener("touchstart", function(){
                window.location.href = this.href
            })
        }
    

    竖向滑屏

    // 手指按下(父元素绑定事件) 
    
    // 手指移动(不需要嵌套在按下事件中)
    
    如果手指抬起来的时候没有额外的动作,就不需要写手指抬起事件
    
    

    四. 适配

    em: 参照自身的字体大小
    rem:参照根元素的字体大小(html,默认16px)

    rem 适配原理:

    1. 页面中的所有元素,单位都是 rem
    2. 把整个屏幕的宽度设置成根元素的字体大小(1 rem = 375px)
    
    var styleNode = document.createElement('style')
    
    • rem 适配

    图纸较大,750,1080 页面元素较多

    • viewport 适配

    设计图纸较小 320

    • 百分比适配

    页面比较少

    • 媒体选择器(响应式布局)

    在不同的屏幕上,页面布局不一样

    • 具体像素

    dpr = 2 = 物理像素/CSS 像素


    天才樱木花道
    12 声望0 粉丝

    武装你的应该是知识,而不是一堆破铜烂铁