设置移动端适配

在默认设置情况下，Avada主题本身也是可以根据设备情况做到一定程度的自适应。比如：

• 有Sidebar的会自动的放到页面的最下面的位置，不管Sidebar是左侧还是右侧位置的；
• Footer不管是3栏还是4栏，会依次的把这些栏展示在页面的最下面的位置；

这样的自适应，虽然网页看上去没有被弄的变形了之类的，但是用户体验其实并不太好。在电脑端的浏览器中，Sidebar和Footer的区域每个页面都展示出来并没什么不妥，但是在手机端这种屏幕面积非常有限的地方，这些区域占据的位置就有些过大了。

Mobile端，我们希望可以做到和PC端所展示出来的内容有些不一样，也就是访问同一个URL，在手机和电脑上，所展示出来的内容是可以做到差异化的。

我们可以通过下面2方面进行一些设置：

在Theme Options中，关于自适应(Responsive)的设置其实有2个地方：

• Theme Options -> Responsive，在这里面，有一些关于Responsive Breakpoint(自适应触发值)的设置，基本上都是800px；
• Theme Options -> Fusion Builder Elements -> Visibility Size Options，其中有Small Screen、Medium Screen、Large Screen三种Screen的数值设置。

但是，这2个地方的设置，我们都不需要去修改。知道这2个设置只是为了更好的理解我们在编辑制作页面的时候所看到的关于Visibility的设置究竟是怎么起作用的。

实际上，我们在使用Fusion Builder的时候，会有3个类型事物：

• Container
• Columns
• Elements

而这3个东西，在编辑的时候，都对应有Visibility的选项，分别是：

• Container Visibility
• Columns Visibility
• Elements Visibility

每个选项中都可以选择是否在Small Screen、Medium Screen、Large Screen这3种Screen中可见。默认是全都选中了的，可以点击后背景色变浅灰之后是属于未选中状态。

如下图所示：

所以，通过Container/Columns/Elements的Visibility的设置，我们可以在编辑同一个页面的时候，一部分内容做的是用来展示在Large Screen上，另外一部分内容是只在Mobile上才展示的。

注意：为了自己能更好的区分哪个区域的内容是PC上的，哪个区域的内容是Mobile上展示的，建议用不同的Container来区分，可以给Container标记一个名称。如下图所示：

上面的设置只是针对内容区域在移动端展示与否的设置，对于Sidebar和Footer，还是存在我们最前面说的问题。

那我们如何让Sidebar和Footer区域在屏幕到了某一个宽度之后就会隐藏掉，不展示出来呢？

目前在Avada5.2.2版本中，暂时还没有提供这两个设置。我们需要加点CSS代码到Theme Options -> Custom CSS中去。

直接把下面的代码Copy放进去保存吧 :-)

@media (max-width: 800px) {
#sidebar,.fusion-footer-widget-area {
display:none !important;
}
}

像案例中这样，加过这段代码之后，Sidebar和Footer区域都隐藏起来了。（Footer区域保留了Copyright部分）