首先简单介绍一下rem布局的基础了解
rem布局,最为直观的效果,页面全部元素现实等比缩放,包括文字,盒子大小;
本篇文章中涉及三点
1. 媒体查询@media
2. less预编译处理器的详解
3. rem单位的详解
介绍开始啦!!!!
1.媒体查询语法与运用介绍
1.1:媒体查询可以响应屏幕的变化,根据屏幕不同的宽,从而获得不同的样式,然后实现不同的样式显示。
1.2:语法如下
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- mediatype该属性的意思是媒体的类型,也就是定义你要查询的是什么类型的设备,通常都是定义为screen(该属性的意思为电脑屏幕,平板电脑,与智能手机等)
@media screen and|not|only (media feature) {
CSS-Code;
}//此时已经定义了媒体类型为屏幕
- and|not|only这三个为关键字
and的意思为可以将多个媒体特性连接在一起,相当与是且的意思。
not意思为排除某个媒体类型,相当于非的意思。
only意思为指定某个特定的媒体类型,可以省略。
总结为可以只留下and其它两个都可以省略
@media screen and (media feature) {
CSS-Code;
}//此时已经定义了媒体类型为屏幕以及省略了not与only
- (media feature)为该媒体特性;
对于属性screen(屏幕)那么它的特性就为屏幕的宽(width)
我们可以进行以下设置
@media screen and (min-width:500px) {
body {
background-color: red;
}
}此时我们设置了屏幕宽最小为500px,
当屏幕的宽大于或者等于500px的时候,那么body的背景颜色为red
2.less预编译处理器介绍
2.1 code编辑器下载插件
插件名叫Easy Less然后安装好
2.2 安装好插件后我们可以创建一个文件名.less文件
2.3 less的使用
我们在less文件里面输入css内容时,less文件变化并且自动实时往生成的同级目录下的css文件中注入
编译过的css代码
2.3.1 less的嵌套
父级{
子级{
子子{
}
}
}
//我们还可以使用后代选择器
例如:
#aa{
color:red;
>.b{
color:blue;
>.c{
color:yellow;
}
}
}
2.3.2 less里面定义变量
比如我们可以在less中定义==@no:10;==
@符号相当于js中的var,是变量的标志
no是变量的名称,跟js的命名规范是一样的
冒号表示赋值,类似js中的=
10是变量的值,可以带单位 例如10rem,
使用变量 @no
因为变量可以带单位:变量是可以运算的,也就是说less支持运算
(没有变量也支持运算)
3.rem单位与语法计算介绍
3.1 rem单位介绍
首先我们要理解什么是rem?如何使用?
答:rem可以控制整个页面所有元素有关PX类,只要是你设置数值的地方都可以实现控制。
在rem里面1rem=HTML的font-size的大小
3.2 rem的计算
首先通过媒体查询获取当前屏幕的宽度,然后定义一个固定数为no(这个名字可以随意取),那么rem计算公式为rem=width(获取的当前的屏幕的宽)/ no(自己设置的固定数)可以参考以下代码,我们通过媒体查询监听屏幕不同的尺寸,然后只要屏幕宽度变化,那么HTML的大小也会跟随变化
@no: 10; //划分为10等分,我们可以划分为任意等分,通常划分为10等分
@media screen and (min-width: 750px) {
html {
min-width: 750px/@no;
//当屏幕宽度为750px的时候1rem等于10px,所以750px就等于75rem
}
}
@media screen and (min-width: 480px) {
html {
min-width: 480px/@no;
//当屏幕宽度为480px的时候1rem等于10px,所以480px就等于75rem
}
}
我们可以通过设置的屏幕宽来除以当前的rem值从而计算出在不同屏幕下HTML元素的大小,如下图所示
综合以上知识你就可以自己写一个跟随屏幕大小随意变换的网页啦!!!