前端基础学习4

兼容性：
公司名称 前缀 浏览器
微软 -ms- IE
火狐 -moz- FireFox
谷歌 -webkit- Chrome/safari
欧朋 -o- O
前缀名的添加，是为了让我们添加的样式可以在不同浏览器上被识别；不同浏览的版本不同，可能导致代码无法运行

开发思路、设计理念： 垂直化
1.用户群体(年龄、性别、职业、学历)

A：渐进增强
搭建起基础结构，根据用户的需求，进行功能的添加（样式）
B：优雅降级
先把所有功能开发完成，根据用户的需求，进行功能的删减

移动端：
doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + ‘px’;

winwidth:获取当前页面的宽度
移动端雪碧图设置：
要添加整张雪碧图的尺寸backgroud-size:雪碧图的宽rem 高rem;

Bootstrap 栅格布局(响应式)
可以根据浏览器宽度不同进行布局
格式：
先有一个容器/container（祖先元素），里面再添加row
row里面的内容 根据类名进行单元格的设置(宽度)

工程化(sass)：
创建变量：
格式：

$变量名:具体的值(可以有多个值，分隔符是空格);
使用变量：属性名:$变量名;

创建混合选择器(不带参)：
格式：@mixin 混合器名称{css代码块}
使用混合器：@include 混合器名称;

创建带参混合器：
格式：@mixin 混合器名称($参数1,$参数2,$参数n){
属性名:参数1;
属性名:参数2;
属性名:参数n;
}