vue页面适应不同的屏幕

想要一个页面适应不同的屏幕,可以使用下面的方法

<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div>内容</div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div>内容</div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div>内容</div></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div>内容</div></el-col>
</el-row>

:xs=“4” :sm=“6” :md=“8” :lg=“9” :xl=“11”

调整参数,就可以适应不同屏幕,而不会使页面在不同分辨率的屏幕下显得杂乱。

屏幕被分成12分,参数是几,就是占几份。

如果需要一行占1个,参数就12(12/12)

如果需要一行占2个,参数就6(6/12)

如果需要一行占3个,参数就4(4/12)

xs :

sm:≥768px 响应式栅格数或者栅格属性对象

md:≥992px 响应式栅格数或者栅格属性对象

lg:≥1200px 响应式栅格数或者栅格属性对象

xl:≥1920px 响应式栅格数或者栅格属性对象 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/15033.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

探索大型语言模型(LLMs)能否在不泄露私人信息的情况下联合其他大型语言模型共同解决问题

概述 谷歌的 Gemini Ultra&#xff08;2023 年&#xff09;和 OpenAI 的 GPT-4 &#xff08;2023 年&#xff09;等大规模语言模型在许多任务中都表现出了令人印象深刻的性能。然而&#xff0c;这些模型不仅推理成本高昂&#xff0c;而且运行于数据中心&#xff0c;而数据中心…

CloudDM Team Docker 版安装指南

CloudDM Team 是一款全新的国产自研数据库管理工具&#xff0c;在《全新的企业级数据库数据安全管控平台》 一文中全面介绍了其核心功能和特点。本文将会介绍如何在 Ubuntu Linux 中安装并初步使用这款数据库管理工具。 准备工作 安装 Docker CloudDM Team 安装过程中需要用…

第22天Linux下常用工具

目录 第 1 章 vim 编辑器 1.1 vim 安装 1.2 vim 的使用 1.3 vim 的 4 种工作模式 第 2 章 gcc 编译器 2.1 编译流程&#xff08;以 main.c 为例&#xff09; 2.2 gcc 的常用参数 2.3 进行多模块编译 第 3 章 动态库静态库的制作 3.1 库的作用 3.2 库的分类与特点 …

/// ts中的三斜线指令 | 前端

第一次看到注意到这行代码&#xff0c;不知道的还以为是注释呢&#xff0c;查了资料才知道这是typescript中的三斜线指令&#xff0c;那有什么作用呢&#xff1f; 1. 这行代码是TypeScript中的一个三斜线指令&#xff08;Triple-Slash Directive&#xff09;&#xff0c;用于…

Schnorr 和 BLS 算法详解

Schnorr 签名和 BLS 签名在区块链技术中都有着重要的应用。它们各自具备独特的优势&#xff0c;使其在不同的区块链应用场景中得到广泛使用。 Schnorr签名算法 Schnorr签名算法是一种基于离散对数问题的数字签名算法&#xff0c; 由德国密码学家 克劳斯施诺尔 &#xff08;Cl…

C++类和对象 - 拷贝构造, 赋值重载

拷贝构造函数 拷贝构造作用&#xff1a;一个已经存在的对象去初始化另一个要创建的对象 日常写代码中会出现如下场景: class Data { public:Data(int year, int month, int day) // 拷贝构造函数{this->_year year;this->_month month;this->_day day;} priva…

为什么咨询公司需要项目管理软件:7大关键优势

在咨询公司中&#xff0c;同时管理多个项目、客户和目标并非易事&#xff0c;尤其需要兼顾长期发展。项目管理软件就成为了各类项目型企业&#xff08;包括咨询公司&#xff09;的重要工具。 对于顾问来说&#xff0c;项目管理软件可以简化工作流程、增强客户关系并提高效率。本…

3大核心技术,免费开源的智能合同审查分析软件的技术介绍

本智能合同审查分析系统致力于解决法律领域中复杂文档与信息处理的难题&#xff0c;采用最先进的深度学习与自然语言处理&#xff08;NLP&#xff09;技术&#xff0c;提供精准的实体识别与关系抽取功能。系统基于BERT、GPT等主流模型&#xff0c;实现自动识别和关联法律文档中…

GitCode光引计划有奖征文大赛

一、活动介绍 GitCode平台汇聚了众多杰出的G-Star项目&#xff0c;它们犹如璀璨星辰&#xff0c;用各自的故事和成就&#xff0c;为后来者照亮前行的道路。我们诚邀广大开发者、项目维护者及爱好者&#xff0c;共同撰写并分享项目在GitCode平台上托管的体验&#xff0c;挖掘平…

UE4 Cook 从UAT传递参数给UE4Editor

需求 一句Cook的命令如下&#xff1a; ${EnginePath}/Engine/Build/BatchFiles/RunUAT.sh BuildCookRun -project${ClientPath}/${ProjectName}.uproject -noP4 -platformIOS -cooksinglepackage -client -clientconfig${CookConfig} -iterate -skipbuild -nocompile -NoMutex…

api驱动的云服务是什么意思?

API驱动的云服务是指利用API技术来驱动和提供云服务的模式。在这种模式下&#xff0c;云服务提供商会公开一系列的API接口&#xff0c;允许开发者或应用程序通过调用这些API来实现对云服务的访问和操作。API驱动的云服务是现代云计算技术的重要组成部分&#xff0c;API驱动的云…

Springboot 启动端口占用如何解决

Springboot 启动端口占用如何解决 1、报错信息如下 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 9010 was already in use.Action:Identify and stop the process thats listening o…

【Rust调用Windows API】杀掉指定进程(包括兄弟进程、子进程、父进程)

前言 前面一篇文章写了使用Rust调用Windows API 获取正在运行的全部进程信息 &#xff0c;本篇实现杀掉指定进程。 通过标准库可以管理当前进程创建的子进程&#xff0c;要 kill 掉子进程也比较容易&#xff0c;这里不赘述了&#xff0c;主要实现通过调用Windows API来杀掉兄…

基于Python的外卖点餐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

世界坐标系、相机坐标系、图像物理坐标系、像素平面坐标系

坐标系及其转换在计算机视觉领域占据核心地位。理解如何从一个坐标系转换到另一个坐标系&#xff0c;不仅是理论上的需要&#xff0c;也是实际应用中不可或缺的技能。 一、世界坐标系的定义 世界坐标系是一个全局的坐标系统&#xff0c;用于定义场景中物体的位置。在这个坐标…

Pycharm也可以用来查看和操作MySQL数据库?

1.首先确保自己的电脑安装好MySQL MySQL :: Download MySQL Community Server 2.在创建project界面选择Open 打开并选择自己存放sql文件的路径 完成后的效果 3.创建好数据库的连接 4.打开Database视窗 5.给数据库添加新的Schema 6.运行需要查看或者操作的sql文件 7.选择适合的…

1、VMware12安装ubuntu18.04

1、ubuntu18地址获取&#xff1a; Index of /ubuntu-releases/18.04/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 2、安装过程&#xff1a; 1、新建虚拟机 2、选择稍后安装操作系统 3.客户机操作系统选择Linux&#xff0c;版本选择Ubuntu 64位 4、点击“自定义…

数据结构查找-哈希表(创建+查找+删除)+(C语言代码)

#include<stdlib.h> #include<stdio.h> #include<stdbool.h> #define NULLKEY -1//单元为空 #define DELKEY -2//单元内容被删除 #define M 20 typedef struct {int key;//关键字int count;//统计哈希冲突探测次数 }HashTable; //插入到哈希表 void InsertHT…

基于Java的周次生成工具类实现

摘要&#xff1a; 本文介绍了一个基于Java的周次生成工具&#xff0c;用于根据指定的年份和周次类型&#xff08;自然周或财务周&#xff09;生成连续的周次列表数据。 需求描述&#xff1a; 根据周次类型&#xff0c;生成连续的周次列表数据。 周次类型分2种&#xff1a; …

为什么华大严选基因是您的最佳选择?品牌特色全解析

《为什么华大严选基因是您的最佳选择&#xff1f;品牌特色全解析》 在当今基因检测市场竞争激烈的环境下&#xff0c;华大严选基因以其卓越的品质和独特的品牌特色脱颖而出&#xff0c;成为众多消费者的首选。作为 DNA 基因检测行业十佳优质品牌和 3・15 重点推荐品牌&#xff…