rem布局
文章目录
rem是一个基于html字体大小的相对单位
常于媒体查询和less连用
媒体查询
- 语法
<!-- 例: -->
@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... -->
媒体查询引入资源
- 写一个css
- 在html里引入
<link rel="stylesheet" href="index.css" media="scree and (max-width=640px)"
LESS
-
css的弊端:无法计算,没有函数,冗余度高
-
LESS使用方法:
-
安装easy less
-
写less文件,用.less后缀
-
保存会自动生成.css为文件
-
引入所需页面即可
-
less语法
-
使用变量
-
定义变量@name=value
-
调用变量
- 例:font-size=@font14
-
-
less嵌套
-
nav{ a{ fons-size:14px; } }
-
hover和伪元素情况
nav{ a{ &:hover{ } &::before{} } } //加个&符号指向父元素
-
-
less运算
- 直接输入运算符运算,左右必须有空格
- 两个运算单位不一样,以第一个单位为准
- 只有一个有单位,以有单位的为准
- 新版本中,除法需要加括号
-
rem布局本质
本质上就是页面元素用rem单位定义大小,
用媒体查询控制html根元素的fonsize大小,
以便实现适配不同界面大小的布局。