前端day23

一 媒体查询

   1 媒体查询：由设备类型，检测设备特性表达式构成。

   2 语法：

      @media 设备类型[all/screen] and (条件表达式){

    css样式

}

注：and两侧必须有空格

    not放在设备类型的前面(反向选择[排除某个范围])

   3 媒体查询：做样式微小调整

        例如：

              浮动

              显示隐藏

              文本大小

              宽高

二 移动端准备工作

   1 meta标签的设置

     视口1：1比例、禁止用户缩放

     <meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

   2 设备像素比

     1 retita屏：视网膜高清显示屏

     2 ppi：每英寸所显示像素点的密度(ppi值越高，屏幕显示更清晰)

     3 dpi：每英寸所显示像素点的个数

  4 dpr：设备像素比例

          dpr==物理像素(ps量取的大小)/逻辑像素(css要设置的像素)

     5 dpr怎么获取

       根据UI设计图而定：绝大多数拿到的设计图的大小：640px/750px，

       针对性对dpr进行获取：

           如果设计图为640px或者750px选取dpr 为2；

           如果设计图为 大于 750px选取dpr 为3。

   3 单位

      1 学过的：

px / % /deg /pt /em

2 新的单位

1 rem：

1 rem相对大小

相对于html的font-size值而定，默认 1rem=16px ；

2 rem布局

等比缩放

        2 vm /vh

          1 vw

视口的宽度的比例 100vm==视口宽度的100%

          2 vh

视口的高度的比例 100vh==视口高度的100%

          3 vmin

视口的宽度和高度进行比较，谁小我用谁。

          4 vmax

视口的宽度和高度进行比较，谁大我用谁。

   4 计算流程

     例：设计图为750px，考虑dpr为2，ps中量取某个元素宽度为88px，

         设置css大小的时候

 88px/dpr2==44px，

又因为不能固定44px（44px固定大小后就不能放大或缩小），所有

44px转为rem，因为html中

              font-size：100px；

              1rem==100px；

              44px==0.44rem

三vm结合rem实现移动端适配

   前提：为了方便rem的计算，常在html中设置：

font-size：100px；

1rem==100px；

   出现问题：100px不会自动适配

需求：需要找到一个能随着视口改变的单位 vw

问题：100px== ?vm

答案：

第一种情况：设计图为640px，dpr为2

            640px /2==320px

            视口的宽 320px

            100vw==320px   两边各除以3.2

            31.25vm==100px

第二种情况：设计图为750px，dpr为2

            750px /2==375px

            视口的宽 375px

            100vw==375px    两边各除以3.75

            26.67vm==100px

   总结：

       如果设计图为640px，html的font-size值为32.75vw ；

       如果设计图为750px，html的font-size值为26.67vw 。

四 移动端案例

   1 足球圈 zuqiuquan