从无到有构建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的意思是当前样式仅适用于当前组件，此时，咱们发现样式修改为功了：