css的基本格式构成：CSS中的媒体查询以及rem单位

css的基本格式构成：CSS中的媒体查询以及rem单位} font-size: 37.5px; 检测设备屏幕宽度在375px时发生变化html{ 将屏幕大小分为十等分 当html字体大小发生变化时 rem的值也会随着变化

1-em和rem的区别

两个都是相对单位

em 值的大小取决于父元素的字体大小

rem 值的大小取决于html的字体大小

2-媒体查询

@media (width:375px) {

检测设备屏幕宽度在375px时发生变化

html{

将屏幕大小分为十等分 当html字体大小发生变化时 rem的值也会随着变化

font-size: 37.5px;

}

}

媒体查询主要就是检测不同设备屏幕 但设备种类较多 每一个都写媒体查询不现实.便捷方式可以用js来实现这一功能.

3-flexible

用js来检测设备屏幕 在body内最下面用<script src="./js/flexible.js"></script>来引入flexible js文件.

4-rem的计算方式

rem=(设计稿上的值 / 37.5px的标准值)

5-less(预处理器 css的升级版)

下载less插件 后缀名.less生成less文件.

less语法和css有所不同.后代选择器和伪类选择器.后代选择器在less中可以直接嵌套.&表示当前标签.

less中可以实现加减乘除.

可以设置变量.

引入其他less文件进行关联@import url(./base.less);

禁止导出文件 在首行添加 // out:false