一、rem
rem(root em)是一个相对单位,类似于em,em是父元素字体大小
1em=父元素的font-size的px值
不同的是rem是相对于html元素的字体大小
1rem=html元素的font-size的px值
html{
font-size:24px
}
div{
font-size:12px
}
p {
width: 1em;(等于12px)
height: 1em;(等于12px)
width: 1rem;(等于24px)
height: 1rem;(等于24px)
}
一个页面中只能有一个rem,在html中,可以整体控制大小,尽行整体缩放
浏览器默认是1rem= 24px
二、媒体查询:
2.1、是CSS3 的新语法
@media可以针对不同的屏幕尺寸设置不同的样式
/* 在屏幕上,并且最大的宽度是800像素,设置我们想要的样式 */
@media screen and (max-width:750px){
body{
font-size:25px ;
}
}
mediatype查询类型
将不同的终端设备划分成不同的类型,称为媒体类型
all:用于所有设备
print:用于打印机和打印预览
scree:用于电脑屏幕,平板电脑,手机等
关键字:
and:可以将多个媒体特性连接到一起作为媒体查询的条件。
not:排除某个媒体类型,相当于“非”的意思,可以省略
only:指定某个媒体类型,可以省略
媒体特性:
width:定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域的宽度
max-width:定义输出设备中页面最大可见区域的宽度
2.2、引入资源:
当样式比较多的时候,我们可以针对不同的媒体使用不同的style文件
<link rel="stylesheet" type="text/css" href="./320.css" media="screen and (min-width:320px)"/>
<link rel="stylesheet" type="text/css" href="./640.css" media="screen and (min-width:640px)"/>
三 、less
css缺点:
冗余度比较高,不方便扩展,不利于复用,没有很好的计算能力
less依赖于node.js(首先安装less)
less安装:
npm install -g less
命名规则: @变量名:值;
变量名区分大小写
less编译
下载css插件
@bg_color:yellow;
@font14:14px;
@spDivH: 600px / 2;
@spDivW:300px + 400;
@spDivW1:(100px + 100) * 2;
@a_bg:red;
@a_hbg:blue;
div.test{
background-color: @bg_color;
width: @spDivW1;
height: @spDivH;
a{
font-size: @font14;
background-color: @a_bg;
// a:hover{} 伪类选择器前面添加 &
&:hover{
background-color: @a_hbg;
}
}
}
使用,如果有伪类、交集、伪元素选择器,内层选择器的前面加上&符号
div{
&:hover{
}
}
运算符(+ - * /),左右两侧必须有两个空格
两个数参与运算,如果只有一个数有单位,则最后的结果就以这个单位为准
两个参数与运算,如果2个数都有单位,而且单位不一样,最后的结果以第一个单位为准
四、移动端适配搭建
适配方案一:rem+ 媒体查询 + less
1、根据“媒体查询”动态设置font-size 字体大小
2、元素取值方式rem: 1rem就是html中font-size的大小
适配方式二: flexible.js + rem 是一个库,不需要再写媒体查询了
1、引入视口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
2、使用一
(1)去git官网下载下载 压缩文件找里面的flexible.js
(2)引入 flexible-2.0.min.js文件
<script src="flexible-2.0.min.js"></script>
使用二
//下载
npm i -S amfe-flexible
//引入
<script src="./node_modules/amfe-flexible/index.js"></script>
3、默认把当前屏幕划分为10等分即10rem;
4、创建全局的base.css 设置最大的宽度比例:
[](javascript:void(0)