從無到有構建vue實戰項目（三）

4、響應式佈局的實現

1. elemnt-ui參考bootatrap提供了響應式佈局，附上地址：https://element.eleme.cn/#/zh-CN/component/layout

2. 如下是個人佈局設計，目前看起來沒什麼錯誤：

   ​其實就是作了每行總共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爲單位。

5、導航欄的實現

1. element-ui提供了諸多組件，極大的方便了咱們快速構建應用，在此附上導航菜單https://element.eleme.cn/#/zh-CN/component/menu以及輸入框地址https://element.eleme.cn/#/zh-CN/component/input

2. 如下是個人基礎佈局：

   此時，你可能發現了一個奇怪的問題，爲何搜索框的寬度佔滿了菜單欄，看起來十分的彆扭，那是由於element-ui爲每一個組件提供了默認樣式，此時咱們就須要修改默認樣式了，也很簡單，只須要這樣作：
   

   你可能已經發現了，咱們只須要新建一個css文件，並將其引入.vue文件而且在style標籤里加上scoped屬性便可，scoped的意思是當前樣式僅適用於當前組件，此時，咱們發現樣式修改爲功了：