#前端学习笔记#day13_1 淘宝导航条 像素

• 淘宝导航条
  
  • 需要横向排列的nav-inner设置flex
    
  • flex默认是initial，我们设置为auto这样拉宽屏幕，里面的元素也会跟着拉宽
    
  • 设置成15%也会随着放大而拉宽，值越小，图片中间的空隙就越大
    
  • 图片设置宽度和父元素一样，这样就不会因为放大缩小而溢出
    
  • text-align: center;只能设置给块元素
    
• 不同屏幕，单位像素大小不同，像素越小，屏幕会越清晰
  
• 移动端默认的视口大小是 980px（css像素）
  
  • 默认情况下，移动端的像素比就是 980/移动端宽度
    
  • 编写移动页面时，必须保证有一个比较合理的像素比：
    
    • 1css像素对应2物理像素
      
    • 1css像素对应3物理像素
      
• 调整视口大小来调整像素比
  
  • 通过meta标签设置视口大小
    
  • 这样写更好配适
    
• 
  
• vw是视口宽度 viewport
  
  • 100vw就是一个视口的宽度
    
  • 1vw=1%的视口
    
• vw单位永远相对于视口进行
  
• 常见的宽度
  
  • 750px 1125px
    
• 100vw= 750px 0.133333vw=1px
  
  • 6.67vw =48px