#前端学习笔记#day14 美图手机

• rem
  
  • 1rem = 1 html的字体大小，这边的1rem就等于100px，如果width=3rem.就是300px，html中的font-size和width是倍数关系，乘法关系
    
  • font-size设置为0.133333vw，但是网页中字体大小最小是12px，不可以设置比12像素还要小的字体，除了0，所以我们可以设置为13.33333vw.扩大一百倍，rem缩小一百倍
    
  •  
    • 响应式布局
      
      • 网页可以根据不同设备或者窗口的大小呈现不同的效果
        
      • 使用响应式布局，可以使一个网页适用于所有设备
        
      • 响应式布局关键：媒体查询
        
      • 通过媒体查询，可以为不同的设备或者设备不同状态来分别设置样式
        
    • 使用媒体查询
      
      • 语法：@media 查询规则{}
        
        • 媒体类型：
          
          • all 所有设备
            
          • print 打印设备 只有在打印机打印时会有这个效果
            
          • screen 带有屏幕的设备
            
          • speech
            
          • 可以使用,连接多个媒体类型，这样他们之间就是一个或的关系
            
        • 可以在媒体类型前加个only表示只有
          
          • only的使用，主要是为了兼容一些老版本的浏览器
            
        • 无论什么设备情况下背景颜色都是这个
          
    • 媒体特性
      
      • width 视口的宽度 （不常用）
        
      • height 视口的高度 （不常用）
        
      • min-width 视口的最小宽度 （视口大于指定宽度时生效）
        
      • max-width 视口的最大宽度（视口小于指定宽度时生效）
        
    • 样式切换的分界点，我们称其为断点，也就是我们的网页会在这个点时发生变化
      
      • 一般比较常用的断点
        
        • 小于768 超小屏幕max-width=768px
          
        • 大于768 小屏幕min-width=768px
          
        • 大于992 中屏幕 min-width=992px
          
        • 大于1200 大屏幕 min-width=1200px
          
          • 注意这里得是完整的格式
            
          • and表示且 , 表示或者
            
          • not表示非
            
    • 美图手机导航条
      
    • 响应式设计的网页：
      
      • 移动端优先
        
      • 渐进增强
        
    • 这边有字，我们希望它消失，但是不删除，因为我们希望页面点击时能够看到，所以我们设置它的等级为-9999
      
    • 我们使用的 是二倍图，将其缩小，需要将长宽缩小，图片尺寸缩小为一半
      
    • 当页面放大时改变布局
      
    • 使得每一格都分开