前端自适应知识点

标签：com   mil   class   img   nbsp   mat   生产   info   strong   

1. 一些DIV的边框样式：

<template>
<div class="dsj">
<div id="Container">
<div id="header" style="font-size:3.5vw; color: PowderBlue; text-align: center; padding-top:2vw;">中珠牧业生产实时测试系统</div>
<div id="cc" style="font-size:1.7vw; color:#CDB38B; text-align: center;padding-top:1.5vw"><span>{{ now | dateformat(‘YYYY-MM-DD‘) }}</span><br>
<span style="font-size:1.5vw; color: #CDB38B; text-align: center;">{{ now | dateformat(‘HH:mm:ss‘) }}</span>
</div>
<div style="width:100%;height:28vw;background-color:#fff;">
<div style="width:30%;height:100%;background-color:red;float:left">
<div style="width:24vw;height:10vw;background-color:#fff;margin:1vw auto 0"></div>
<div style="width:28vw;height:15vw;background-color:#fff;margin:1vw auto 0"></div>
</div>
<div style="width:40%;height:100%;background-color:green;float:left">
<div style="width:30vw;height:3vw;background-color:#fff;margin:1vw auto 0"></div>
<div style="width:39vw;height:22.5vw;background-color:#fff;margin:1vw auto 0"></div>
</div>
<div style="width:30%;height:100%;background-color:blue;float:left">
<div style="width:24vw;height:10vw;background-color:#fff;margin:1vw auto 0"></div>
<div style="width:28vw;height:15vw;background-color:#fff;margin:1vw auto 0"></div>
</div>
</div>
<div style="height:13vw;background-color:#fff">

</div>
</div>
</div>
</template>

width: 宽度

height:高度

font-size:1.7vw;  字体大小

color: #CDB38B;   颜色

background-color:#fff;  背景颜色

float:left；   左边浮动

margin:1vw auto 0 ； 边距为1vw， vw自适应单位；%比也是自适应的

text-align: center;   文本居中

border-width: 10px;  边缘宽度

有一些是看见其它网页的，如果有冒犯我可以快速删除！！！

前端自适应知识点

标签：com   mil   class   img   nbsp   mat   生产   info   strong   

原文地址：https://www.cnblogs.com/zengxiangcai/p/9370713.html