CSS特殊图形绘制，媒体查询

想要成为祖国的花朵2024-12-08 16:22

绘制特殊图形

绘制三角形

制作三角型使用的是border属性，内容区宽高值为0

html 复制代码

<div class="box"></div>
.box {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid blue;
}

绘制梯形

绘制三角型时宽和高都是0像素，给它加100的宽度看看效果

html 复制代码

.box {
  width: 100px;
  height: 0;
  border-bottom: 80px solid red;
  border-left: 50px solid green;
  border-right: 50px solid yellow;
}

媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

参数解释

width = device-width 宽度等于当前设备的宽度
initial-scale 初始的缩放比例（默认设置为1.0）
maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
user-scalable 用户是否可以手动缩放（默认设置为no）

媒体查询语法

html 复制代码

@media screen and (max-width: 768px) {
    /* 设备小于768px加载样式 */
  body{
    background-color: red;
   }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
   /* 设备小于768px但小于992px加载样式  */
   body{
      background-color: pink;
   }
}
@media screen and (min-width: 992px) {
    /* 设备大于992px加载样式 */
  body{
       background-color: green;
   }
}