前端路线--Vue3(day03)

边框图片

//利用边框图片来进行响应式的设计
      .left_01 {
        width: 4.5833rem;
        height: 1.5521rem;
        position: absolute;
        top: 0.7292rem;
        left: 0.625rem;
        //需要先设置边框才会让边框图片显示
        border: 1px solid transparent;
        //需要设置成边框的宽度,宽度大小实际为在PS中测试的px
        border-width: 0.4167rem 0.2292rem 0.3021rem 2.5rem;
        //设置边框的图片
        border-image-source: url("../assets/images/border01.png");
        //设置边框图片的裁切,不要加px单位,和边框宽度保持一致
        border-image-slice: 40 22 29 240;
        //防止盒子被撑大
        box-sizing: border-box;
      }

rem布局

//rem:相对于html元素的字体大小
//em:相对于父元素的字体大小
//rem优点：
//通过修改html的文字大小来使页面中的元素大小被控制

//媒体查询
@media 媒体类型 and/not/only (媒体特性){}
//媒体类型:all print screen
//媒体特性:,ax-width:800px

<link rel="" href="" media="screen and (min-width:320px)">

项目链接

可视化项目

笔记