CSS学习笔记14——移动端相关知识（rem,媒体查询,less）

移动端

rem适配布局

rem单位

rem基准是相对于html元素的字体大小

• 父元素设定font-size，子元素根据rem缩放对应字体大小

媒体查询（Media Query）

• @media可以针对不同屏幕尺寸设置不同样式
• 当你重置浏览器大小过程中，页面也会根据浏览器宽度和高度重新渲染页面

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

• mediatype媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印浏览
scree	用于电脑屏幕，平板电脑，智能手机等

• 关键字 and not only 将多个媒体特性连接到一起作为媒体查询的条件

值	解释说明
and	“且”可以将多个媒体特性连接到一起
not	“非”排除某个媒体类型，可以省略
only	指定某个特定的媒体类型，可以省略

• media feature媒体特性 必须有小括号包含

值	解释说明
width	定义输出设备中可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

@media screen and (max-width:800px) {}
/*在屏幕上并且最大宽度是800像素 设置我们想要的样式*/

引入资源（使用两套css）

<link rel="stylesheet" media="mediatype and|not|only (media feature)" herf="mystylesheet.css"

Less基础

less变量

@变量名：值；

less编译

Easy less 插件把less文件编译为css文件

less嵌套

.header {
    width:200px;
    a {
        color:pink;
        &：hover {
            color:green;
        }
    }
}

如果遇见（交集|伪类|伪元素选择器）

• 内层选择器前面没有&符号，则它被解析为父选择器的后代
• 如果有&符号：被解析为父元素自身或父元素的伪类

less计算

• 运算符中间左右有个空格隔开
• 对于两个不同单位的值之间的运算，运算结果值取第一个值的单位
• 如果只有一个值有单位，运算结果取该单位