iview响应式布局

Posted 2022-12-01 tuituji27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iview响应式布局相关的知识，希望对你有一定的参考价值。

我想说，我要被逼成前端了。

之前没接触过响应式，这两天和另一位前端程序媛小小的研究了下。做了一个小例子，记录一下，方便以后使用。

<template>
  <div>
    <Row>
        <Col :xs=" span: 24" :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
        <Col :xs=" span: 24"  :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
        <Col :xs=" span: 24"  :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
        <Col :xs=" span: 24"  :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
    </Row>
   <Row>
        <Col :xs=" span: 24" :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
        <Col :xs=" span: 24"  :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
        <Col :xs=" span: 24"  :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
        <Col :xs=" span: 24"  :md=" span:11, offset: 1 " :lg=" span: 5, offset: 1 ">Col</Col>
    </Row>
  </div>
</template>
<script>
    export default 
        
    
</script>
<style>
  .ivu-col
    border:1px solid red
  
</style>

以上是关于iview响应式布局的主要内容，如果未能解决你的问题，请参考以下文章

响应式布局流式布局

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局简析