Vue 实现响应式布局

实现响应式布局是工作中必不可少 客户需要

若是使用vue +element ui 的方式实现

浏览器宽度为760的情况

浏览器宽度为360的情况 

手机上的显示的情况

一、对于屏幕尺寸的定义

element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸：xs、sm、md、lg 和 xl。并对这五种尺寸提供了两种解决方案。

名称	尺寸	设备
xs	<768px	超小屏 如：手机
sm	≥768px	小屏幕 如：平板
md	≥992px	中等屏幕 如：桌面显示器
lg	≥1200px	大屏幕 如：大桌面显示器
xl	≥1920px	2k屏等

二、Element UI提供的两种解决方案
 

（一）在标签中指定元素所占大小
这种方式通常需要结合标签使用。在列元素中指定不同尺寸下元素所占的大小，例如:xs="4"表示在手机上将一行分为24栏本元素占4栏。这种方法简化了CSS关于响应式布局代码的编写，但是需要配合标签使用，不是很灵活。

:xs="4"表示在手机上将一行分为24栏本元素占4栏。这种方法简化了Css关于响应式布局代码的编写，但是需要配合标签使用，不是很灵活。

（二）使用样式类指定元素是否显示

这种方法需要导入element-ui/lib/theme-chalk/display.css样式就可以实现在不同屏幕尺寸下，元素是否显示。这种方法的好处是不需要配合标签就可以使用，使用起来比较灵活。但是这种只能简单的对元素进行隐藏，如果需要实现稍微复杂点的响应式样式就要思考很多。使用这种方法首先需要导入样式：import 'element-ui/lib/theme-chalk/display.css';。然后在目标元素上添加类名就行。例如：

这表示元素在手机网页中显示，在平板及比平板屏幕大的设备上隐藏。下面是Element UI官网提供的一些用于隐藏元素的类名。

hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏

三、不该被忘记的CSS语法

比如时间选择器不能满足需求时，我们可以使用@media语法来确定屏幕尺寸，并且指定在不同尺寸下的元素样式。例如，我们指定一个元素在不同屏幕尺寸下的大小：

浏览器宽度800的情况

 手机尺寸的情况：

@media screen and (max-width: 768px) {
  .customCon .el-picker-panel__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .customCon .el-date-range-picker__content {
    width: 100%;
  }
}

效果图：

pc

手机设备

 

示例代码如下：无添加额外class