浏览器自适应问题

浏览器自适应问题

本章节主要讲解了浏览器应该如何自适应1366和1980两种屏幕，其中包括echart.js和svg如何在页面中使用的基本情况介绍

一、准备工作：
1）首先需要编写出一套通用的html结构代码
2）其次需要分别写出1920*1080和1366*768屏幕对应的css
3）最后页面使用百分比布局+rem布局来布置页面
4）在js中需要获取缩放后屏幕的尺寸大小
5）使用媒体查询@media实现1920和1366的自适应
6）echart.js的使用
7）svg的使用

二、1920屏幕
1）需要在body或最外层div上设置min-width：1980px;目的是为了让1366至1980之间的样式能随着屏幕的缩小而不改变其中的基本样式
2）获取盒子中的每一个元素的高，让其自动填充盒子的高度
3）在js中获取每一个盒子的类名和id值

对应的html代码:<div class="main">    <div class="left">        <div class="top_box1">            <div class="m1" id="n1"></div>            <div class="m2" id="n2"></div>        </div>        <div class="bottom_box2"></div>    </div>    <div class="center"></div>    <div class="right"></div></div>对应的css代码:@media screen and (min-width:1367px) {    .main {        min-width: 1920px;        width:100%;        background-color: #014982;    }    .main .left {        width: 33%;        border: 1px solid red;    }    .main .center{        width: 33%;        border: 1px solid skyblue;    }    .main .right{        width: 34%;        border: 1px solid yellow;    }}对应的js代码:var H = document.documentElement.clientHeight;//获取浏览器的高度console.log(H);//打印并检测高度var topData = document.getElementsByClassName('top_box1')[0];topData.style.height = H*0.500+'px';//此为left中的top盒子的高度，0.500表示上部分盒子的高度所占有的百分小数var bottomData = document.getElementsByClassName('top_box2')[0];bottomData .style.height = H*0.460+'px';//此为left中的top盒子的高度，0.460表示下部分盒子的高度所占有的百分小数var n1 = document.getElementById('n1');//获取内层盒子的id：n1n1.style.height = H*0.068+'px';var n2 = document.getElementById('n2');//获取内层盒子的id：n2n2.style.height = H*0.068+'px';

三、1366屏幕
其步骤和1920的类似，代码如下：

对应的html代码:<div class="main">    <div class="left">        <div class="top_box1">            <div class="m1" id="n1"></div>            <div class="m2" id="n2"></div>        </div>        <div class="bottom_box2"></div>    </div>    <div class="center"></div>    <div class="right"></div></div>对应的css代码:@media screen and (min-width:1366px) {    .main {        min-width: 1920px;        width:100%;        background-color: #014982;    }    .main .left {        width: 33%;        border: 1px solid red;    }    .main .center{        width: 33%;        border: 1px solid skyblue;    }    .main .right{        width: 34%;        border: 1px solid yellow;    }}对应的js代码:var H = document.documentElement.clientHeight;//获取浏览器的高度console.log(H);//打印并检测高度var topData = document.getElementsByClassName('top_box1')[0];topData.style.height = H*0.500+'px';//此为left中的top盒子的高度，0.500表示上部分盒子的高度所占有的百分小数var bottomData = document.getElementsByClassName('top_box2')[0];bottomData .style.height = H*0.460+'px';//此为left中的top盒子的高度，0.460表示下部分盒子的高度所占有的百分小数var n1 = document.getElementById('n1');//获取内层盒子的id：n1n1.style.height = H*0.068+'px';var n2 = document.getElementById('n2');//获取内层盒子的id：n2n2.style.height = H*0.068+'px';

四、echart.js在页面中的运用
需求：需要在页面中动态的获取图形的数据，使用echart.js是为了可视化数据，让用户更加清晰简单的看到

执行步骤：
1）需要将引入的echarts库引入至项目中，在此文件中为js外部引入，根据项目需求修改js中的参数，可参考echarts官网来学习

<script src="./echarts.min.js"></script>//引入echarts库<script src="./main.js"></script>//引入图表所在的js文件

2）由于echarts是外部引入的图表，所以需要一个盒子单独包裹，该盒子拥有宽高，这里的宽高依旧采用百分比的模式
3）在做echarts自适应的时候，其规则和普通的获取页面的元素类似

对应的html代码：<div class="box">    <div class="b1">        <div class="picture" id="picture1"></div>    </div>    <div class="b2"></div></div>对应的css代码：.picture {    width: 100%;    height: 100%;}#picture {    //对图标的样式做操作，根据项目需求而定}对应的js代码：var H = document.documentElement.clientHeight;//获取浏览器的高度console.log(H);//打印并检测高度var picture1= document.getElementById('picture1');picture1.style.height = H*0.434+'px';

五、svg在页面中的运用
页面中一些简单的图片均可以用svg来制作

<div class="photo">    <svg width='154px' height='22' xmlns="http://www.w3.org/2000/svg " version="1.1">//图片的总体宽度154px，高度22px        <polygon points="0,0 154,0 142,22 12,22" style="fill:#22344E" />        <text x='55' dy='15' style='fill: #ffffff;'>人员分析</text>    </svg>    <div class="person1"  id="analysis"></div></div>