rem布局一些基础知识

rem布局

---

---

rem是一个基于html字体大小的相对单位
常于媒体查询和less连用

媒体查询

1. 语法

<!-- 例： -->
	@media screen and (min-width:320px){
		html{
			font-size:20px;
		}
	} 


<!-- 语法 -->
<!-- 	@media mediatype and|not|only (media feature){
		html{
			font-size:20px;
		}
	} 

	mediatype : screen/print/all
	(media feature) : min-width/max-width... -->

媒体查询引入资源

1. 写一个css
2. 在html里引入

<link rel="stylesheet" href="index.css" media="scree and (max-width=640px)"

LESS

1. css的弊端：无法计算，没有函数，冗余度高

2. LESS使用方法：

3. 安装easy less

4. 写less文件，用.less后缀

5. 保存会自动生成.css为文件

6. 引入所需页面即可

7. less语法

   • 使用变量

     • 定义变量@name=value

     • 调用变量

       • 例：font-size=@font14

   • less嵌套

     • nav{
       	a{
       		fons-size:14px;
       	}
       }
       

     • hover和伪元素情况

       nav{
       	a{
       		&:hover{
       
       		}
       		&::before{}
       	}
       }
       
       //加个&符号指向父元素
       

   • less运算

     • 直接输入运算符运算，左右必须有空格
     • 两个运算单位不一样，以第一个单位为准
     • 只有一个有单位，以有单位的为准
     • 新版本中，除法需要加括号

rem布局本质

本质上就是页面元素用rem单位定义大小，
用媒体查询控制html根元素的fonsize大小，
以便实现适配不同界面大小的布局。