四、響應式布局的實現
-
elemnt-ui參考bootatrap提供了響應式布局，附上地址：https://element.eleme.cn/#/zh-CN/component/layout
-
以下是我的布局設計，目前看起來沒什么錯誤：
其實就是做了每行總共24個柵格，在不同尺寸的頁面上如何分配寬度比例：
名稱 尺寸 xs <768px sm ≥768px md ≥992px lg ≥1200px xl ≥1920px 比如這里直接給xs賦值4，他的寬度在xs（<768px，手機）就是4/24。 除了直接給賦值數字，也可以給對象如：{span:18,offset:3}。span即是僅賦值數值時的默認參數位，為寬度。offset為從左邊的偏移量，也是1/24為單位。
五、導航欄的實現
-
element-ui提供了諸多組件，極大的方便了我們快速構建應用，在此附上導航菜單https://element.eleme.cn/#/zh-CN/component/menu以及輸入框地址https://element.eleme.cn/#/zh-CN/component/input
-
以下是我的基礎布局：
此時，你可能發現了一個奇怪的問題，為什么搜索框的寬度占滿了菜單欄，看起來十分的別扭，那是因為element-ui為每個組件提供了默認樣式，此時我們就需要修改默認樣式了，也很簡單，只需要這樣做：
你可能已經發現了，我們只需要新建一個css文件，並將其引入.vue文件並且在style標簽里加上scoped屬性即可，scoped的意思是當前樣式僅適用於當前組件，此時，我們發現樣式修改成功了：
