引言

之前的文章介绍过bootstrap的响应式布局，帮助我们在手机上适配电脑上的页面，
当然媒体查询也是一个很不错的适配方法
今天带你们了解Element UI的适配方法

Element的栅格系统

bootstrap的栅格系统为12栏，而Element UI划分的更细一点，它拥有24栏
那么怎么划分栏呢，方法非常简单，

<el-row></el-row>标签定义一行，也就是24栏在这一行中进行划分，
<el-col></el-col>定义换分出来的份数，我们的响应式布局就以它两为基础

代码初体验：（我们使用的是Vue哦，别忘了）

<template><div><el-row :gutter="10"><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row :gutter="10"><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="10"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row :gutter="10"><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row></div>
</template><script>export default {name: "Layout"}
</script><style scoped>.el-row{margin-bottom: 20px;&:last-child{margin-bottom: 0;}}.el-col{border-radius: 4px;}.bg-purple-dark{background-color: #99a9bf;}.bg-purple{background-color: #d3dce6;}.bg-purple-light{background-color: #e5e9f2;}.grid-content{border-radius: 4px;min-height: 36px;}.row-bg{padding: 10px 0;background-color: #f9fafc;}
</style>

运行效果图：（当然我们也可以通过 :offset="n"来设置偏移份数(24>=n>=0)）

这是响应式吗？不是！，接下来我们根据屏幕的不同来分配大小：

<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="2" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="7" :xl="11"><div class="grid-content bg-purple-light"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="7" :xl="11"><div class="grid-content bg-purple"></div></el-col><el-col :xs="8" :sm="6" :md="6" :lg="7" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

各位可以运行一下感受哦，浏览器怎么看响应式布局呢？图解：

找一找这个小手机图标，不同的浏览器它的位置不同哦

然后顶栏可以调分辨率或者点击调

左右也是可以拉动的哦

再点击一下小手机就可以退出响应式查看了

下面是对应的尺寸表

通过设置以上的尺寸对应的名称值来动态的改变我们的布局就可以达到响应式的效果了

有时候我们不知道如何调整布局怎么办，比如搜索框太大我们缩小不了，这时候我们可以动态的将一些组件进行隐藏或者显示，相应的表奉上：

使用之前在main.js中引入:

import 'element-ui/lib/theme-chalk/display.css';

完整配置:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';Vue.use(ElementUI);

这些都是给el-col的类添加哦！

如果以上还不好使，那就采用媒体查询吧！

例：如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {body {background-color:lightblue;}
}

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，
@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

以下信息来自于菜鸟教程:

mediatype的类型:

媒体的功能：

知道为什么HTML页面在电脑上和手机上的布局不同吗？这篇文章带你走进Element UI的简单适配相关推荐

谷歌浏览器html调试iphone11,如何用windows电脑+ios调试手机上打开的网页
一.环境 PC chrome浏览器(版本45.46) IOS safari浏览器(11.2.6) win系统(win7.win10) 一根USB数据线二.打开iphone上 Safari浏览器的we ...
如何用windows电脑+ios调试手机上打开的网页
一.环境 PC chrome浏览器(版本45.46) IOS safari浏览器(11.2.6) win系统(win7.win10) 一根USB数据线二.打开iphone上 Safari浏览器的we ...
电脑投屏到电视android,电脑怎么投屏到电视？看完这篇文章你就懂了
之前我们介绍过了手机怎么投屏到电视上观看,其实使用电脑投屏也很方便,同样是有线.无线两种方式.有线连接不用过多介绍,根据电脑.电视接口选择相应的连接线就可以了,这篇文章主要告诉你怎么才能无线投屏. 1 ...
物联卡接入号_物联卡apn设置机型大全！物联卡连不上4G,网慢，推荐你看这篇文章...
有不少朋友咨询关于卡不能正常上网的问题,为了服务大众,今天小编整理汇总了一些自己了解的知识. 当然,在文章中介绍一下关于物联网卡连接不上如何设置apn,请大家仔细阅读. 一.物联网卡不能正常使用,首先 ...
想知道如何在Mac上剪切文件吗？一定要看这篇文章！
在 Mac 上是不能直接"剪切"文件的!如果您是从 Windows 转到 Mac,可能对这个感到令人困惑,但 Finder 的"编辑"菜单中的"剪切& ...
计算机怎么换桌面皮肤,如何更换电脑腾讯视频上的皮肤样式
如何更换电脑腾讯视频上的皮肤样式我们经常使用电脑上的腾讯视频软件看视频,在首页上我们可以看到自己的皮肤,当我们觉得不好看而想要换皮肤时,应当怎么做呢,接下来就让小编来教你们吧. 具体如下: 1. 第 ...
编辑php程序推荐的软件,手机上如何才能编辑程序代码？（软件推荐）
对于一个程序员来说,离开电脑是否就意味着失去"吃饭的工具"?其实并不是,现在是移动互联网发达的时代,人手一部手机即可联系"全世界".那么手机如何直接编辑程序代码 ...
Android 手机上安装并运行 Ubuntu 12.04
Android 手机上安装并运行 Ubuntu 12.04 2012 年 8 月 16 日 by DawnDIY in Android | 7 Comments Android 是基于Linu ...
学计算机可以用华为电脑吗,华为手机和华为电脑一起用有什么好处？
我们在日常办公学习和生活中,经常会遇到一种需求,那就是如何将手机上的内容复制到电脑端,这一直以来都是一个非常头大的问题.无论是通过社交软件导入.数据线连接.手机助手传输.云盘等应用,还是其他各种各样的 ...
基于android的防抖音直播,通过AirDroid无线投屏，在抖音上直播手机游戏
AirDroid是安卓手机必装的应用,也是抖音官方推荐使用的安卓手机投屏神器.通过将手机屏幕投屏到电脑上进行手机游戏直播,深受直播界各大主播和游戏爱好者喜爱. 那么,要如何使用AirDroid进行手机 ...

知道为什么HTML页面在电脑上和手机上的布局不同吗？这篇文章带你走进Element UI的简单适配

引言

Element的栅格系统

知道为什么HTML页面在电脑上和手机上的布局不同吗？这篇文章带你走进Element UI的简单适配相关推荐

最新文章

热门文章