当前位置：网站首页>rem布局

rem布局

2022-07-13 17:38:00 【Vivian小姐】

rem布局

文章目录

一、rem基础

1.em是相对于父元素的字体大小
2.rem是相对于html元素的字体大小

rem的优点：可以通过修改html里面的文字大小来整体控制页面元素的大小

二、媒体查询

在这里插入图片描述

mediatype：all（所有设备）、print（打印机和打印预览）、screen（电脑屏幕，平板，手机）
关键字：and（且）、not（非）、only（指定某个类型的媒体类型，可以省略）
媒体特性：width、min-width、max-width

        /* 在屏幕上 并且 最大的宽度是300像素 设置想要的样式 */
        /* 从小到大的写法 */
        @media screen and (max-width: 300px) {
    
			
        }
        @media screen and (min-width: 301px) {
    
        
        }
        @media screen and (min-width: 501px) {
    
			
		}

媒体查询可以按照从小到大或者从大到小的写法，但是使用从小到大会更加简洁（css层叠性）
在这里插入图片描述

三、Less基础

在这里插入图片描述

（1）less变量

@color: pink;
body {
    
    background-color: @color;
}

（2）less编译
在这里插入图片描述

（3）less嵌套

.nav {
    
    width: 200px;
    height: 200px;
    background-color: pink; // 后代选择器 .logo {
    
        color: red;
    }
    a {
    
        // 伪类选择器 &:hover {
    
            color: blue;
        }
        // 伪元素选择器 &::before {
    
            content: "";
        }
    }
}

&：伪类、伪元素、交集选择器

（4）less运算
less提供了加（+）减（-）乘（*）除（/）的运算
运算符左右两侧必须有空格
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
两个数都有单位，且两个单位不一样，以第一个单位为准

@border: 5px + 5;
div {
    
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
}
img {
    
    width: 82 / 50rem;
    height: 82 / 50rem;
}