精华内容
下载资源
问答
  • 响应式布局框架
    2021-09-05 17:28:44

    响应式布局(bootstrap框架)

    前言

    • 响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的

    设备划分设计尺寸尺寸
    超小屏幕(手机)100%<768px
    小屏幕设备(平板)750px768px<width<992px
    中屏幕(卓面显示器)970px992px<width<1200px
    宽屏设备(大桌面显示)1120px>1200px
    • 响应式布局容器:响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果。(布局容器的宽度是固定的)

    • 原理:就是在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式布局。

    bootstrap框架

    1、快速开发工具

    • bootstrap前端开发框架:bootstrap来自Twitter(推特),是目前最受欢迎的前端框架。bootstrap是基于html、css、javascript的,它简洁灵活。使得web开发更加快速

    • 中文网址:http://bootstrapt.css&&.com/

    • 框架:顾名思义就是一套架构,它有一套比较完整的网页功能来解决方案,而且控制权再框架本身,有预制样式,组件,插件。使用者需要按照框架所规定的某种规范进行开发。

    优点

    • 标准化的HTML和css编码规范

    • 提供了一套简洁、直观的组件,样式,插件等

    • 有自己的生态圈,不断的更新迭代

    • 让开发更简单,提高了开发的效率

    2、基本使用

    • 去官网下载相关文件(js,css,font),在页面中引入相关的文件

    • 因为bootstrap框架是基于Jquery开发的,所以引入bootstrap.js之前,先引入jquery.js

    3、布局容器

    • Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。

    • 注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

    • .container 类用于固定宽度并支持响应式布局的容器。

    • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。适用于单独制作移动端开发。

    4、bootstrap栅格系统

    • 栅格系统:栅格系统是通过一系列的行(row)与列(column)的组合来创建页面的布局,设置的内容就可以放在这些创建好的布局中

    • 实现原理:通过定义容器的大小,平分为12份。调整内外边距。结合媒体查询

    使用步骤

    • 一行数据(row)必须包含在 .container或.container-fluid中,以便为其赋予合适的对齐方式和内边距

    • 使用行在水平方向创建一组列

    • 具体内容放在列内,列可以作为行的直接子元素内置的一大堆样式,可以使用col-xs-4(占4列宽度)的样式来快速创建栅格

    • 通过设置padding从而创建列之间的间隙,让后面第一列和最后一列设置负值margin来抵消掉 padding的影响

    • 栅格系统中指定1到12的值来表示其跨越的范围

    (1)列组合

    • 列组合就是通过更改数字来合并列,类似表格里的colspan(列合并)。不过使用起来非常简单。

      <div class="container">
          //第一行
          <div class="row">
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
              <div class="col-md-1">colmd-1</div>
          </div>
          
          //第二行
          <div class="row">
              <div class="col-md-3">colmd-3</div>
              <div class="col-md-3">colmd-3</div>
              <div class="col-md-3">colmd-3</div>
              <div class="col-md-3">colmd-3</div>
          </div>
          
          //第三行
          <div class="row">
              <div class="col-md-8">colmd-8</div>
              <div class="col-md-4">colmd-4</div>
          </div>
          
          //第四行
          <div class="row">
                 <div class="col-md-6">colmd-6</div>
                 <div class="col-md-6">colmd-6</div>
          </div>
      </div>

    (2)列偏移

    • 有时候并不想让两个相邻的列挨在一起,这时候可利用栅格系统的列偏移(offset)功能实现,而不必再定义margin值。对于中等屏幕,使用.col-md-offset-*形式的样式就可以将列偏移到右侧比如:.col-md-offset-2,的意思是将元素向右移动2个列的宽度

    <div class="container">
        //第一行
        <div class="row">
            <div class="col-md-4">col-md4</div>
            //第二列,偏移4个
            <div class="col-md-4 col-md-offset-4">col-md-4</div>
        </div>
        //第二行
        <div class="row">
            <div class="col-md-4">col-md4</div>
            <div class="col-md-4 col-md-offset-2">col-md-4</div>
        </div>
    </div>
    ​

    (3) 列嵌套

    • 列嵌套:删格系统内置的栅格系统内容将再次嵌套。简单理解就是对一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列的.col-sm-2等等元素存到以及有了的-col-sm-7里

    • 列嵌套最好加一个行(row)这样可以取消父元素的padding值,而且高度和父级一样高

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-7"></div>
                    <div class="col-md-5"></div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>

    (4)列排序

    • 列排序就是改变列的方向,也就是改变左右浮动,并设置浮动的距离。在栅格系统里,可以通过.col-mdpush-和.col-md-pull-来实现这一目的

    • push:推动/pull:拉

      <div class="container">
          //第一行
          <div class="row">
              <div class="col-md-3">col-md3</div>
              <div class="col-md-9">col-md9</div>
          </div>
          //第二行
          <div class="row">
              <div class="col-md-3 col-mdpush-9">col-md-3</div>
              <div class="col-md-9 col-mdpull-3">col-md-9</div>
          </div>
      </div>
      ​
      • 默认情况下,col-md-9在左边,col-md-3在右边。如果要互换位置,需要将col-md-9列向右移动3个列的距离,也就是推3个列的offset,样式用col-md-push-3;而col-md-3则需要向左移动,也就是拉9个offset,样式用col-md-pull-9

    • 注意:bootstrap4.0以上版本你已经废弃以上办法,改为order-(权重),默认值是0

    5、响应式布局

     

    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"> </div>
            <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
            <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
            <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
            <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
            <div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div>
        </div>
    </div>
    • 为了加快移动设备友好的开发,利用媒体查询功能,并使用这些工具类可以针对不同的移动设备展示或隐藏页面内容

      • .hidden-xs: 超小屏幕隐藏

      • .hidden-sm:小屏幕隐藏

      • .hidden-md:中等屏幕隐藏

      • .hidden-lg:大屏幕隐藏

    样式、组件、插件

    • 都是通过类名来引用

    小图标的注意事项

    • 图标类不能和其他组件直接联合使用

    • 不能在同一个元素上与其他类同存在

    • 创建一个嵌套的span元素,并将图标应用到这个 span上

    • 只对内容为空的元素起作用

    • 对引入的图标位置有规定

    • 图标字体全部位于../fonts/目录内,相对于预编译版CSS文件的应该是同级目录

    js插件的引入方式

    • 在前面章节曾介绍过,在HTML中引入bootstrap.js文件或bootstrap.min.js文件即可使用Bootstrap的JavaScript插件。Bootstrap提供了12种JavaScript插件,引入bootstrap.js文件就意味着这12种插件都引入到页面中了,随便哪个都可以使用。还有一种引入方式,就是单个引入JavaScript插件。在官网下载Bootstrap的时候如果选择源码下载,里面会有一个js文件夹,里面有单个的JavaScript插件文件,针对实际情况可以用到哪个引入哪个。

    更多相关内容
  • autoresponsive-react-native ReactNative 的自动响应式网格布局库。示例 现场演示和文档:xudafeng.github.io/autoresponsive-react 官方示例 安装 $ npm i autoresponsive-react-native --save 相关版本 React ...
  • autoresponsive-react - 实现React的自动响应式布局
  • Vue 项目前端响应式布局框架搭建

    千次阅读 2022-05-21 14:20:48
    Vue 项目前端响应式布局框架搭建


    一、flexible 插件

    项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用第三方插件flexible.js帮助我们修改html根节点的font-size大小,从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变

    flexible.js: web自适应方案 ,阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

    1、引用 flexible 插件

    下载
    cnpm install --save lib-flexible

    下载完成后找到 src 下的 main.js 进行配置,import导入

    // 引用 flexible 插件
    import "lib-flexible/flexible.js";
    

    在这里插入图片描述

    2、修改 flexible 默认配置

    默认情况下只会在 540px分辨率 下生效 所以我们需要根据我们的项目分辨率进行调整,在node_module/lib-flexible/flexible.js中修改代码如下:

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            // if (width / dpr > 540) {
            //     width = 540 * dpr;
            // }
            // var rem = width / 10;
    
            // 修改 最大值:2560   最小值:400
            if (width / dpr < 400) {
                width = 400 * dpr;
            } else if (width / dpr > 2560) {
                width = 2560 * dpr;
            }
            // 设置成24分 1920px设计稿 1rem=80px
            var rem = width / 24;
    
            docEl.style.fontSize = rem + 'px';
            flexible.rem = win.rem = rem;
        }
    

    在这里插入图片描述

    3、展示效果

    这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size,当我们拖动窗口大小的时候,其值会自动改变。
    在这里插入图片描述

    二、cssrem 插件 (px -> rem)

    我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 ,这样一来开发过程中会更加的方便:

    在这里插入图片描述
    添加一个测试的 div 样式, font-size 设置为 50px,可以发现提示中自动帮我们转换成了 3.125rem:
    在这里插入图片描述

    如果不能够换成对应的比例,可能cssrem还使用的默认 16px -> 1rem,找到安装的插件,打开设置,设置 Root Font Size 修改为 80 即可:
    在这里插入图片描述

    三、项目搭建

    1、设置背景图

    将图片放入assets文件夹中 在app.vue中设置背景图:

    <template>
      <router-view />
    </template>
    
    <style lang="scss">
    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box; //border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
    }
    body {
      background: url("~@/assets/xiyang.jpg") top center no-repeat;
    }
    </style>
    
    

    在这里插入图片描述

    2、设置标题文字

    在 myPage.vue 中设置页面的顶部标题栏并进行相应的css样式:

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>顶部标题栏</h1>
        </header>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style lang="scss">
    header {
      height: 1rem;
      width: 100%;
      /* 设置一个半透明淡蓝色背景 */
      background-color: rgba(240, 150, 213, 0.2);
      /* 把标题文字样式设置 */
      h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    }
    </style>
    
    

    在这里插入图片描述

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>顶部标题栏</h1>
        </header>
        <!-- 中间容器 -->
        <section class="container"></section>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style lang="scss">
    header {
      height: 1rem;
      width: 100%;
      /* 设置一个半透明淡蓝色背景 */
      background-color: rgba(240, 150, 213, 0.2);
      /* 把标题文字样式设置 */
      h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    }
    /* 中间容器 */
    .container {
      // 最大最小的宽度
      min-width: 1200px;
      max-width: 2048px;
      margin: 0 auto;
      // 盒子上10px 左右10px 下0的外边距
      padding: 0.125rem 0.125rem 0;
      // 测试
      height: 10rem;
      background-color: rgb(228, 172, 211);
    }
    </style>
    
    

    在这里插入图片描述
    在这里插入图片描述
    由于要创建五个的容器,并且在其中放置slot 槽口,后期方便向容器内插入图表。(Vue中的slot对于编写可复用可扩展的组件是再合适不过了)

    components文件夹下创建 itemPage.vue 等容器组件:

    <template>
      <div class="item">
        <!-- 设置插槽 -->
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style>
    .item {
      /* 高度410px */
      height: 5.125rem;
      border: 1px solid rgb(255, 169, 243);
      /* 外边距20px */
      margin: 0.25rem;
    }
    </style>
    
    

    itemOne、itemTwo、itemThree、itemFour

    <template>
      <div>
        <h2>图表一</h2>
        <div class="chart">
          <!-- 图标容器 -->
        </div>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style></style>
    
    

    views下的myPage.vue中引用调用使用:

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>大数据可视化 - Vue3.0和echarts</h1>
        </header>
        <!-- 中间容器 -->
        <section class="container">
          <!-- 左容器 -->
          <section class="itemLeft">
            <ItemPage>
              <itemOne />
            </ItemPage>
            <ItemPage>
              <itemTwo />
            </ItemPage>
          </section>
          <!-- 中容器 -->
          <section class="itemCenter">
            <h2>地图展示</h2>
          </section>
          <!-- 右容器 -->
          <section class="itemRight">
            <ItemPage>
              <itemThree />
            </ItemPage>
            <ItemPage>
              <itemFour />
            </ItemPage>
          </section>
        </section>
      </div>
    </template>
    
    <script>
    import ItemPage from "@/components/itemPage.vue";
    import itemOne from "@/components/itemOne.vue";
    import itemTwo from "@/components/itemTwo.vue";
    import itemThree from "@/components/itemThree.vue";
    import itemFour from "@/components/itemFour.vue";
    export default {
      components: {
        ItemPage,
        itemOne,
        itemTwo,
        itemThree,
        itemFour,
      },
    };
    </script>
    <style lang="scss">
    header {
      height: 1rem;
      width: 100%;
      /* 设置一个半透明淡蓝色背景 */
      background-color: rgba(240, 150, 213, 0.2);
      /* 把标题文字样式设置 */
      h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    }
    /* 中间容器 */
    .container {
      // 最大最小的宽度
      min-width: 1200px;
      max-width: 2048px;
      margin: 0 auto;
      // 盒子上10px 左右10px 下0的外边距
      padding: 0.125rem 0.125rem 0;
      background-color: rgba(226, 132, 233, 0.5);
      display: flex; //父容器设置flex布局才能在子元素使用
      // 设置左中右的占比 但是不要忘了在父容器要设置flex
      .itemLeft,
      .itemRight {
        flex: 3;
      }
      .itemCenter {
        flex: 5;
        // 高度840px
        height: 10.5rem;
        border: 1px solid rgb(255, 0, 140);
        // 内边距10px
        padding: 0.125rem;
        // 外边距20px
        margin: 0.25rem;
      }
    }
    </style>
    
    

    效果如图所示:

    在这里插入图片描述

    四、图表环境搭建

    1、Echarts 全局引用

    下载
    cnpm install --save echarts

    vue2.0中使用如下写法把echarts挂载在vue实例上,但是这招在3.0行不通了:

    // 引用echarts
    import * as echarts from "echarts"
    Vue.prototype.$echarts=echarts;
    

    在 vue3.0中,在App.vue 中导入全局的echarts组件:

    <script>
    import { provide } from "vue";
    // 引用echarts
    import * as echarts from "echarts";
    export default {
      setup() {
        //第一个参数是名字  第二个参数是你传递的内容
        provide("echarts", echarts); // 不是provider,否则会出现下面报错
      },
    };
    </script>
    

    myPage.vue中进行引用和调用:

    <script>
    export default {
      // 导入echarts组件
      setup() {
        let $echarts = inject("echarts");
        // 控制台打印信息
        console.log($echarts);
      },
    };
    </script>
    
    

    2、Axios 全局引用

    下载cnpm install --save axios

    在 vue3.0中,在App.vue 中导入全局的echarts组件:

    <script>
    import { provide } from "vue";
    // 引用echarts
    import * as echarts from "echarts";
    // 引用axios
    import axios from "axios";
    export default {
      setup() {
        //第一个参数是名字  第二个参数是你传递的内容
        provide("echarts", echarts);
        provide("axios", axios);
      },
    };
    </script>
    

    在myPage.vue中进行引用和调用:

    <script>
    import { provide } from "vue";
    // 引用echarts
    import * as echarts from "echarts";
    // 引用axios
    import axios from "axios";
    export default {
      setup() {
        //第一个参数是名字  第二个参数是你传递的内容
        provide("echarts", echarts);
        provide("axios", axios);
      },
    };
    </script>
    

    在这里插入图片描述

    展开全文
  • 但其实总结下来如何使用响应式布局就几个步骤: 第一,在第一个div设置一个布局类 ,通常我只使用两个类,分别是:layui-container和layui-fluid。 layui-container//此类能在小屏幕以上的设备中固定宽
  • 文章目录Vue 项目前端响应式布局框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景...


    Vue 项目前端响应式布局及框架搭建

    环境

    • Vue 3.0+Vue-router+axios、flex布局、LESS、rem屏幕适配、echarts 5.0、nodejs+express

    一、项目基本结构

    在这里插入图片描述

    返回顶部


    二、项目分辨率响应式创建

    项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用第三方插件flexible.js帮助我们修改html根节点的font-size大小,从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变

    1、flexible.js

    • flexible.js: web自适应方案 ,阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

    下载 flexible:

    G:\Projects\VsCodeProject\vue\app>npm install --save lib-flexible
    

    返回顶部


    2、引用 flexible 插件

    下载完成后找到 src 下的 main.js 进行配置,import导入:

    image-20220326200817131

    返回顶部


    3、修改 flexible 默认配置

    默认情况下只会在 540px分辨率 下生效 所以我们需要根据我们的项目分辨率进行调整,在node_module/lib-flexible/flexible.js中修改代码如下:

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
    
        // 修改 最大值:2560   最小值:400
        if (width /dpr < 400){
            width = 400 * dpr;
        } else if(width /dpr > 2560){
            width = 2560 * dpr;
        }
        // 设置成24分 1920px设计稿 1rem=80px
        var rem = width / 24;
    
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    

    修改好了之后重启项目: ·G:\Projects\VsCodeProject\vue\app>npm run serve ,这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size,当我们拖动窗口大小的时候,其值会自动改变。

    在这里插入图片描述

    返回顶部


    4、cssrem 插件 (px -> rem)

    我们在写代码的时候发现如果我们都根据80px1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 ,这样一来开发过程中会更加的方便:

    在这里插入图片描述

    我们打开 homePage.vue 页面,添加一个测试的 div 样式, font-size 设置为 50px,可以发现提示中自动帮我们转换成了 3.125rem

    cssrem自动匹配比例

    如果不能够换成对应的比例,可能cssrem还使用的默认 16px -> 1rem,找到安装的插件,打开设置,设置 Root Font Size 修改为 80 即可:

    cssrem修改比例

    返回顶部


    三、项目页面框架搭建

    1、设置背景图

    将图片放入assets文件夹中 在app.vue中设置背景图:

    <template>
    
      <router-view/>
    </template>
    
    <style lang="less">
     *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;//border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
     }
     body {
       background: url("~@/assets/bg.jpg") top center no-repeat;
     }
    </style>
    

    image-20220327174847614

    返回顶部


    2、设置标题文字

    homePage.vue 中设置页面的顶部标题栏并进行相应的css样式

    <template>
      <div>
          <!-- 顶部标题栏 -->
          <header>
              <h1>大数据可视化--vue3.0与echarts</h1>
          </header>
      </div>
    </template>
    
    <script>
    export default {}
    </script>
    
    <style lang="less">
        header{
            height: 1rem;
            width: 100%;
            /* 设置一个半透明淡蓝色背景 */
            background-color: rgba(0, 0, 255, .2);
            /* 把标题文字样式设置 */
            h1{
                font-size: .375rem;
                color:#fff;
                text-align: center;
                line-height: 1rem;
            }
        }
    </style>
    

    在这里插入图片描述

    返回顶部


    3、页面主体部分

    (1)section 主体部分

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>大数据可视化 - Vue3.0&echarts</h1>
        </header>
        <!-- 中间容器 -->
        <section class="container">
            
        </section>
      </div>
    </template>
    
    <style lang='less'>
    /* 中间容器 */
    .container{
        // 最大最小的宽度
        min-width: 1200px;
        max-width: 2048px;
        margin: 0 auto;
        // 盒子上10px 左右10px 下0的外边距
        padding: .125rem .125rem 0;
        // 测试
        height: 10rem;
        background-color: grey;
    } 
    </style>
    

    出去头部标题栏部分,我们需要设置主体的图表展示部分,创建一个类名为containersection容器,并为其设置css样式(测试):

    在这里插入图片描述

    返回顶部


    (2)左、中、右布局

    创建左中右这三个部分,分别进行图型的展示。这个时候我们可以使用flex布局来分割他们所占的区块大小,那么他们的占比分别是 3 5 3 。首先创建三个section容器,分别表示部分,然后对其应用 flex布局,并设置占比。

    <template>
      <div>
          <header>
              <h1>大数据可视化--vue3.0与echarts</h1>
          </header>
          <!-- 大容器 -->
          <section class='container'>
              <!-- 左容器 -->
              <section class='itemLeft'>1</section>
              <!-- 中容器 -->
              <section class='itemCenter'>2</section>
              <!-- 右容器 -->
              <section class='itemRight'>3</section>
          </section>
      </div>
    </template>
    
    <style lang='less'>
    /* 中间容器 */
    .container {
      // 最大最小的宽度
      min-width: 1200px;
      max-width: 2048px;
      margin: 0 auto;
      // 盒子上10px 左右10px 下0的外边距
      padding: 0.125rem 0.125rem 0;
    
      display: flex; //父容器设置flex布局才能在子元素使用
      // 设置左中右的占比 但是不要忘了在父容器要设置flex
      .itemLeft,
      .itemRight {
        flex: 3;
        background-color: pink;    // 测试后注释掉
      }
      .itemCenter {
        flex: 5;
        background-color: orange;  // 测试后注释掉
      }
    }
    </style>
    

    效果如图所示:

    image-20220327195759166

    返回顶部


    (3)左、右图表容器整体插槽

    大家会发现我们要展示的左、右4个区域的容器效果是一样的。所以我们可以剥离成一个组件 然后重复调用即可。并且在其中放置slot 槽口,后期方便向容器内插入图表。

    components文件夹下创建 itemPage.vue 创建容器组件:

    <template>
      <div class="item">
          <!-- 设置插槽 -->
          <slot></slot>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style>
    .item {
      /* 高度410px */
      height: 5.125rem;
      border: 1px solid blue;
      /* 外边距20px */
      margin: 0.25rem;
      background-color: rgba(13, 130, 255, 0.851);
    }
    </style>
    

    在views下的homePage中引用调用使用:

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>大数据可视化 - Vue3.0&echarts</h1>
        </header>
        <!-- 中间容器 -->
        <section class="container">
          <!-- 左容器 -->
          <section class="itemLeft">
            <!-- 调用插槽组件 -->
            <ItemPage />
            <ItemPage />
          </section>
          <!-- 中容器 -->
          <section class="itemCenter">2</section>
          <!-- 右容器 -->
          <section class="itemRight">
            <ItemPage />
            <ItemPage />
          </section>
        </section>
      </div>
    </template>
    
    <script>
    // 导入插槽组件
    import ItemPage from "@/components/itemPage.vue";
    export default {
      components: {
        ItemPage,
      },
    };
    </script>
    

    image-20220327194411944

    返回顶部


    (4)左、右各图表容器插槽

    左、右一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且分别显示。然后在4个文件中分别设置相关内容与样式(每个图表的标题不一样要修改):

    <template>
      <div>
          <h2>图表一</h2>
          <div class="chart">
              <!-- 图标容器 -->
          </div>
      </div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    </style>
    

    homePage.vue中引用调用使用这4个组件:

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>大数据可视化 - Vue3.0和echarts</h1>
        </header>
        <!-- 中间容器 -->
        <section class="container">
          <!-- 左容器 -->
          <section class="itemLeft">
            <ItemPage>
              <itemOne />
            </ItemPage>
            <ItemPage>
               <itemTwo />
            </ItemPage>
          </section>
          <!-- 中容器 -->
          <section class="itemCenter">
             <h2>地图展示</h2>  
          </section>
          <!-- 右容器 -->
          <section class="itemRight">
            <ItemPage>
               <itemThree />
            </ItemPage>
            <ItemPage>
               <itemFour />
            </ItemPage>
          </section>
        </section>
      </div>
    </template>
    
    <script>
    // 导入插槽组件
    import ItemPage from "@/components/itemPage.vue";
    // 左右4个小组件的引用
    import itemOne from "@/components/itemOne.vue";
    import itemTwo from "@/components/itemTwo.vue";
    import itemThree from "@/components/itemThree.vue";
    import itemFour from "@/components/itemFour.vue";
    
    export default {
      components: {
        ItemPage,itemOne,itemTwo,itemThree,itemFour
      },
    };
    </script>
    

    在这里插入图片描述

    返回顶部


    (5)中间图表容器布局

    views文件夹下的 homePage.vue 中设置中间区域容器样式,设置容器高度、内外边距、边框:

    <!-- 中间容器 -->
    <section class="itemCenter"><h2>地图展示</h2></section>
    
    </style>
    /* 中间容器 */
    .container {
        .itemCenter {
        	flex: 5;
            // 高度840px
            height: 10.5rem;
            border: 1px solid blue;
            // 内边距10px
            padding: 0.125rem;
            // 外边距20px
            margin: 0.25rem;
        }
    }
    </style>
    

    在这里插入图片描述

    返回顶部


    四、图表环境搭建

    1、Echarts 全局引用

    下载 npm install --save echarts

    在这里插入图片描述

    vue2.0中使用如下写法把echarts挂载在vue实例上,但是这招在3.0行不通了:

    // 引用echarts
    import * as echarts from "echarts"
    Vue.prototype.$echarts=echarts;
    

    vue3.0中,在App.vue 中导入全局的echarts组件:

    <template>
      <router-view />
    </template>
    <script>
    import { provide } from "vue";
    // 引用echarts
    import * as echarts from "echarts";
    export default {
      setup() {
        //第一个参数是名字  第二个参数是你传递的内容
        provide("echarts", echarts);   // 不是provider,否则会出现下面报错
      },
    };
    </script>
    

    homePage.vue中进行引用和调用:

    <script>
    // 导入插槽组件
    import ItemPage from "@/components/itemPage.vue";
    // 左右4个小组件的引用
    import itemOne from "@/components/itemOne.vue";
    import itemTwo from "@/components/itemTwo.vue";
    import itemThree from "@/components/itemThree.vue";
    import itemFour from "@/components/itemFour.vue";
    import { inject } from '@vue/runtime-core';
    
    export default {
      components: {
        ItemPage,itemOne,itemTwo,itemThree,itemFour,
      },
      // 导入echarts组件 
      setup(){
        let $echarts = inject("echarts");
        // 控制台打印信息
        console.log($echarts);
      }
    };
    </script>
    

    重新运行项目查看控制台的输出,发现报错,原因是函数名称写错了(见上面App.vue的注释):

    image-20220328101733632

    修改后重新运行,可以看到控制台打印了所有的echarts属性信息:

    在这里插入图片描述

    返回顶部


    2、Axios 全局引用

    下载 npm install --save axios

    在这里插入图片描述

    vue3.0中,在App.vue 中导入全局的echarts组件:

    <template>
      <router-view />
    </template>
    <script>
    import { provide } from "vue";
    // 引用echarts
    import * as echarts from "echarts";
    // 引用axios
    import axios from 'axios';
    export default {
      setup() {
        //第一个参数是名字  第二个参数是你传递的内容
        provide("echarts", echarts);  
        provide("axios", axios);
      },
    };
    </script>
    

    homePage.vue中进行引用和调用:

    <script>
    // 导入插槽组件
    import ItemPage from "@/components/itemPage.vue";
    // 左右4个小组件的引用
    import itemOne from "@/components/itemOne.vue";
    import itemTwo from "@/components/itemTwo.vue";
    import itemThree from "@/components/itemThree.vue";
    import itemFour from "@/components/itemFour.vue";
    import { inject } from '@vue/runtime-core';
    
    export default {
      components: {
        ItemPage,itemOne,itemTwo,itemThree,itemFour,
      },
      // 导入echarts组件 
      setup(){
        let $echarts = inject("echarts");
        let $axios = inject("axios");
        console.log($echarts);
        // 控制台打印信息
        console.log($axios);
      }
    };
    </script>
    

    image-20220328102930258

    返回顶部


    在这里插入图片描述

    展开全文
  • Android响应式布局

    2021-06-04 12:19:44
    本文由伯乐在线 -chris 翻译。...在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看。在Android上,是通过conf...

    本文由

    伯乐在线 -

    chris 翻译。未经许可,禁止转载!

    英文出处:

    mdswanson。欢迎加入

    翻译组。

    由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法。

    在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看。

    在Android上,是通过configuration qualifiers的方式来加载不同的资源,基于不同的手机屏幕尺寸或者屏幕的朝向(竖直还是水平),而我最大的目标就是创建一个可以自动缩放的布局,而不用根据不同的屏幕尺寸加载不同的布局文件。

    除了为每种设备尺寸分别制作不同的布局文件外,我发现一种更简单的方法,就是为不同屏幕尺寸的设备重载style.xml文件。

    也许你会觉得它很像CSS样式,首先可以定义一个基本的style文件,代表普通设备尺寸,它的路径位于values/styles.xml,然后还可以定义中等设备尺寸,在values-sw600dp/styles.xml(7寸平板),values-sw600dp-land/styles.xml表示水平方向的屏幕,values-sw720dp/styles.xml表示十寸的平板等等。

    在CSS中的响应式网格系统中,我们可以布局一个宽是960像素的.container类(没有margin),而在手机上,我们也可以布局一个100%宽的.container(也是没有margin的)。

    我们可以在Android上使用相同的方法实现,首先,需要建立一个基类样式。

    res/values/styles.xml

    对于平板(竖直的)来说,我们可以添加一些外边距,因为屏幕够大。

    res/values-sw600dp/styles.xml

    在平板上竖直和水平的最大区别在于,我们会加上margin值,这样内容就不会充满整个屏幕了、我们还可以给父视图加一个背景图片,来填充空白区域。

    res/values-sw600dp-land/styles.xml

    然后我们可以在不同的屏幕上,这样使用样式文件:

    这是在四寸屏幕手机的效果:

    0818b9ca8b590ca3270a3433284dd417.png

    这是在七寸平板上的效果:

    0818b9ca8b590ca3270a3433284dd417.png

    这是在七寸平板的横屏效果:

    0818b9ca8b590ca3270a3433284dd417.png

    还有一些在CSS里面非常方便的属性(比如bootstrap),它们是一些帮助类,如.visible-phone,.hidden-phone,.visible-tablet等等,在Android上也可以这么做。

    把这些样式放在对应的配置文件夹中,然后就可以在需要的时候隐藏显示相应的控件了。

    对于平板(水平的)来说,此样式会显示两列,但是对于大多数设备来说,第二列是不会显示的。

    仅仅用了几行xml代码,我们就能够创建一个迷你的布局框架了,我们还可以扩展这种技术,根据需要去实现一个通用的样式文件,以后可以用到项目中。

    很遗憾的是,很难把Android的资源打包进jar包中(非Gradle的话),所以在Android上很难像bootstrap那样去构建一个框架(不要被这些项目误导了 ,如:http://www.androidbootstrap.com/,它们没有你想象的那么强大),还好Android正在向Gradle迁移,这样可以使得制作Android前端的布局框架就更加方便了。

    收藏

    评论

    关于作者:chris

    0818b9ca8b590ca3270a3433284dd417.png

    新浪微博:@yflai01110111

    展开全文
  • 响应式布局常用的3种技术: 弹性布局,媒体查询,窗口
  • 所有应用该类名的盒子,默认已被指定宽度且居中 .container-fluid也是Bootstrap中专门提供的类名,所有应用该类名的盒子,宽度均为100% 分别使用.row类名和.col类名定义栅格布局的行和列 注意: container类自带间距...
  • 它具有出色的 CSS 库,并且与大多数流行的 JavaScript 框架(如 jQuery、Angular、React 和。Vue.js)兼容。其核心库是完全免费使用的。 官网:https://mdbootstrap.com/ [](()6. UIkit [外链图片转存失败,源站可能...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  • 用CSS实现响应式布局

    千次阅读 2021-08-04 08:19:01
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一: 直接在CSS文件中使用@media 类型 and (条件1) and ...
  • 响应式布局总结

    万次阅读 2022-03-28 19:44:18
    rem适配布局,内含阿里百秀案例代码,bootstrap内容讲解
  • 渴切是一个开源中文 (X)...它融入了css3技术,以及响应式布局,12列栅格系统,视差滚动等效果。它提供一个可靠的css基础去创建你的项 目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止
  • 对于自建vue框架响应式布局

    千次阅读 2019-05-31 17:36:05
    1. 首先在data(){ }中,定义一个浏览器当前宽度的变量,并初始化当前加载出来的浏览器的宽度, data(){ return{ screenWidth:document.body.clientWidth, ...然后用watch去监听screenWidth值的改变, ...
  • 媒体设备类型使用详解: <!DOCTYPE html> <html lang=en> <head> <...meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no>...
  • 注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架。注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码...
  • 前端框架bootstrap(响应式布局)入门

    千次阅读 多人点赞 2019-04-24 14:22:00
    Bootstrap,是基于HTML,CSS.javascript的前端框架  该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) ... 作用: 1.Bootstrap使得Web开发更加...2.Bootstrap支持响应式开发,解决了移动...
  • 开拓眼界的方式有两种,一是读书,二是花钱。读书,花最少的钱买别人的财富,你把孙子兵法背下来,孙子便跟你一辈子。花钱,行万里路,阅人无数,毕竟对于人生来说,任何经验都是有用的。 那,既然没有钱,就好好读书...
  • 响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备。 该框架...
  • 网上发现的,觉得不错的响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架
  • Web前端响应式框架

    2021-04-06 16:20:04
    响应式网页的设计与实现 最近学前端接触到了框架,介绍并记录自己的学习收获。 前言 各种移动智能设备的广泛应用,带动了互联网应用向移动平台方向发展,并呈现...基于Bootstrap框架响应式网页设计就是一种全新的设
  • 响应式布局是什么?

    千次阅读 多人点赞 2018-06-30 20:43:23
    一、什么是响应式布局?   响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。   响应式布局可以为不同终端的用户提供更加舒适的界面和...
  • 响应式布局

    千次阅读 2021-08-20 10:03:40
    响应式布局指的是同一页面在不同的屏幕尺寸下游不同的布局,传统的开发方式是PC端开发一套,手机端开发一套,而使用响应式开发布局只要开发一套代码就够了,缺点就是CSS 比较重。 响应式布局表现: 响应式布局优...
  • 试用angularJS框架和bootstrap 前端框架实现响应式布局 .试用本地localStore保存数据

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,196
精华内容 19,678
关键字:

响应式布局框架