day23 html5

day23知识点

媒体查询：由设备类型，监测设备特性表达式构成
语法：@media 设备类型[all\screen] and（条件表达式）{
css样式
}
注：and两侧必须有空格 not放在设备类型的前面（反向选择[排除某个范围]）

媒体查询：做样式微小调整
例如：
浮动
显示隐藏
文本大小
宽高

移动端：meta标签的设置：视口1:1比列、禁止用户缩放

设备像素比dpr
Retina屏 视网膜高清显示屏

   ppi：每英寸所显示像素点的密度（ppi值越高 屏幕显示越清晰）
   dpi：每英寸所显示像素点的个数

   dpr：设备像素比例
       dpr==物理像素（把手机上图片截图放在ps中量取的大小）/逻辑像素（css去设置的像素）

   dpr怎么获取
      根据ui设计图：绝大部分拿到的设计图打 750px/640px
   针对性对dpr进行获取：
      如果设计图为640px 或者 750px  选取dpr（2）  例如640/2=320
      如果设计图为大于750培训       选取dpr（3）

新接触的一个单位rem
rem：rem相对大小 相当于html的font-size的值而定 默认1rem=16px
rem布局 （等比缩放）

    计算流程：假如设计图为750px
        首先：考虑dpr为2 =325px
            ：ps中量出某个元素为88px（随意量的）
            ：设置css大小时候88px/dpr（2）=44px
            ：又因为不能固定44px（44px固定之后就不能放大或者缩小）
            ：所以44px转成re
            ：因为html中的font-size：100px；（可以调）   1rem=100px
            ：44px=0.44rem

    vw 单位 ：  视口的宽的比例  100vw == 视口宽度的100%
    vh      ：  视口高度的比例  100vh == 视口高度的100%
vmin    :    视口的宽和高进行比较 谁小我用谁
vmax    ：   视口的宽和高进行比较 谁大我用谁