layout-responsive | mobile

1. 学会media query（媒体查询）
2. 没图不做
3. 学会隐藏元素
4. 手机端要加一个
   
5. 手机端的交互方式不一样
   i. 没有 hover
   ii. 没有 touch 事件
   iii. 没有 resize （窗口大小调整）
   iv. 没有滚动条

media

---

在 css 中添加

@media (max-width) {   /* 宽度为 0 ~ max-width */
 
}

@media (min-width) and (max-width) {  /* 宽度为 min-width ~ max-width */
  
}

在原有的样式下面添加上面代码，来实现响应式页面

在头文件中添加

媒体查询是可以用 css 文件代替具体内容的
也是先把文件加载好，但是只有满足max-width: 320px时 css 才生效

一个响应式的布局

---

    
    
    
    
    



    

        

            
logo
            

        
        
  
            
导航1
            
导航2
            
导航3
            
导航4
            
导航5
        
        
  
            
导航1
            
导航2
            
导航3
            
导航4
            
导航5
        
    

• 先写手机端的样式（mobile first），导航栏默认隐藏，点击右上角菜单后
  出现
• 再重新写一个 PC 端的导航栏，再另外写它的样式

效果链接