1、私有前缀
在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。一般来说，移动端更新迭代很快，对CSS3支持良好, 因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。
css3需要增加的私有前缀
-moz-:代表firefox浏览器私有属性
-mS-:代表ie浏览器私有属性
-wedkit-:代表safari,chrome私有属性
-0-:代表Opera私有属性
-webkit-border-radius:50%; //谷歌
-moz-border-radius:50%; //火狐
-ms-border-radius:50% ; //ie
-o-border-radius:50%; //欧朋
border-radius:50% ; //标准写法
提倡写法：
-moz-border-radius:10px;
webkit-border-radius:10px;
-o-border-radius:10pxi
border-radius:10px;
css3包含哪些属性呢？
比如说border属性：border-radius比如说background属性：background-size等比如说box-shadow、text-shadow，box-sizing等比如说transform、animation、transition等●box-shadow：○第一个值：阴影水平偏移○第二个值：阴影垂直偏移○第三个值：阴影的模糊度(模糊的距离)○第四个值：阴影的大小○第五个值：颜色○第六个值：默认是outset inset 内阴影
2、css3总结：
1.CSS3新增加的属性,结构伪类,伪元素选择器 2.CSS32D移动,旋转和缩放属性 3.CSS3动画设置方法
3、背景渐变
渐变可以分为●线性渐变●径向渐变
线性渐变
线性渐变 默认是从上到下
●渐变的写法：○从上到下（默认）：background: linear-gradient(red,blue);○从左到右：background: linear-gradient(to right,red,blue);○对角：background: linear-gradient(to right bottom,red,blue);○角度：background: linear-gradient(45deg,red,blue);
1、从上到下.box {
width: 400px;
height: 200px;
background: linear-gradient(red, green);
background: -webkit-linear-gradient(red, green);
}
2、从一个方向到另一个方向（left 、right 、bottom、top）下面的例子就是从左到右
.box {
width: 400px;
height: 200px;
background: linear-gradient(to right,red, green);
background: -webkit-linear-gradient(to right,red, green);
}
3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角
.box {
width: 400px;
height: 200px;
background: linear-gradient(to bottom right, red, green);
background: -webkit-linear-gradient(to bottom right, red, green);
}
4、还可以是角度
background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);
●重复线性渐变
background-image: repeating-linear-gradient(#252220 30px, #E94057 60px, #27e056 100px);
案例1、发廊灯发廊灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 300px;
height: 100px;
border: 1px solid #333333;
margin: 50px auto;
overflow: hidden;
}
.son {
width: 1800px;
height: 100px;
background-image: repeating-linear-gradient(45deg, #fff 0px, #ffffff 25px, #000000 25px, #000000 50px);
animation: run 10s linear infinite;
}
@keyframes run {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(-1500px, 0px);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="son"></div>
</div>
</body>
</html>
径向渐变●radial-gradient()
div {
width: 300px;
height: 300px;
/* background-image: radial-gradient(circle, red, green); */
/* 默认是椭圆，但是正方形是看不出区别的 */
background-image: radial-gradient(red, green);
}
可以定义中心的位置，百分比相对的是宽高，要用at加上position的值
div {
width: 400px;
height: 400px;
background-image: radial-gradient(circle at 25% 25%, red, yellow, green);
}
案例--电蚊香
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-image: repeating-radial-gradient(circle, #000000 0px, #000000 30px, #ffffff 30px, #ffffff 60px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4、less简介
定义：less是css的一门预处理的语言作用：less就是就是css的加强版，可以用更少的代码实现更强大的样式css中也是支持变量的，但是IE不支持css中也有计算属性，但是ie9以下不支持less的语法和css的语法大致上都是一样的，但是less做了一些扩展，浏览器无法执行less，所以需要讲less编译成css。
那如何编译呢？
1、在vscode中先安装一个插件（easy less）
●less结构嵌套清晰
2、引入样式的时候必须要引入编译后的css文件才会生效5、less语法
1、结构嵌套的关系可以这么写JavaScript
.box {
width:200px;
.box2 {
width:100px;
}
}
2、less中的单行注释不会编译到css文件中
3、变量的使用
@width:500px;
.box2 {
width:@width;
height:@width;
background-color:lightcoral;
}
4、如果写了多个一样的变量，我们变量使用的规则是就近原则
5、变量也可以先使用然后再去声明
6、使用已有属性的值
.box2 {
width:@width;
height:@width;
color:#f5f5f5;
// 使用已有属性的值
background-color:$color;
}
7、错误示范
.father {
color:red;
// 需求：hover father的时候颜色变成绿色
.father:hover {
color:green;
}
}
正确的应该怎么写呢？
.father {
color:red;
// 需求：hover father的时候颜色变成绿色
&:hover {
color:green;
}
}
媒体查询
@media 针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。
@media not|only mediatype and (expressions) { CSS 代码...; }
媒体类型
媒体查询案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.box{
width:200px;
height:200px;
background:green;
}
/*
当屏幕的宽度小于600px的时候，我就让.box 这个盒子背景颜色pink
*/
@media screen and (max-width:600px){
.box{
background:pink;
}
}
@media screen and (min-width:700px){
.box{
background:gold;
}
}
/* 大于等300 小于等于800 */
@media screen and (min-width:300px) and (max-width:800px){
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
媒体查询案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 需求：小于768px的时候显示一个颜色
大于768到1200 显示一个颜色
大于1200的时候显示一个颜色
*/
*{
margin:0;padding:0;
}
.box{
width:200px;
height:200px;
background:green;
}
@media screen and (max-width:768px){
.box{
background:pink;
}
}
@media screen and (min-width:769px) and (max-width:1200px){
.box{
background:gold;
}
}
@media screen and (min-width:1201px){
.box{
background:darkseagreen;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
媒体查询案例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
.box>li{
width:12.5%;
height:50px;
text-align: center;
line-height: 50px;
border:1px solid lightgreen;
float:left;
box-sizing:border-box;
}
/* 大于等于1200 的时候显示8个
大于等于900 小于1200的时候显示4个
大于等于768px 小于900的时候显示2个
小于768px 的时候显示一个
*/
@media screen and (min-width:1200px){
.box>li{
width:12.5%;
}
}
@media screen and (min-width:900px) and (max-width:1199px){
.box>li{
width:25%;
}
}
@media screen and (min-width:768px) and (max-width:899px){
.box>li{
width:50%;
}
}
@media screen and (max-width:767px){
.box>li{
width:100%;
}
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
产品形态：
第一种：pc端和移动端共用一个域名的，比如
华为：https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent
苹果：https://www.apple.com/cn/?afid=p238%7C11DPVC7K_mtid_18707vxu38484&cid=aos-cn-kwsg-brand
第二种：pc端和移动端用两个域名的，pc端和移动分别做了两套，比如：小米、京东、淘宝，一般域名中带有m的都是移动端。
京东pc：https://www.jd.com/
京东移动： https://m.jd.com/
小米pc：https//www.mi.com/
小米移动：https://m.mi.com/
总结：什么时候共用一套，什么时候用两套？
当结构比较简单的时候，我们可以共用一套。当结构比较复杂我们就可以写两套。
pc端和移动端的区别
事件上的区别：pc端有鼠标，所以会有与鼠标相关的事件：比如点击、滑过等。但是移动端没有鼠标，只有与手指相关的一些事件，比如滑屏，左滑、右滑等事件。
浏览器兼容性：pc端需要考虑各个浏览器的兼容性问题，比如：火狐、谷歌、ie等，但是移动端不需要考虑各个浏览器的兼容问题，它的内核就是webkit和谷歌一样。但是移动端需要考虑适配问题，因为各个手机屏幕不一样大，而且机型不同，有时候也会有一定的兼容问题。
移动端详解：
在移动端虽然整体来说大部分浏览器内核都是 webkit，而且大部分都支持 css3 的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，需要去考虑这些问题。这时候你也就不得不解决在不同手机上，不同情况下的展示效果，所以就需要有效的移动端适配方案。
1、屏幕尺寸
屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸
2、设备像素（物理像素）、设备分辨率
设备像素（device pixels）也叫物理像素，指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会再改变。设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素，比如 iPhone6 和 iPhoneSE 设备独立像素是横向750 纵向1334
设备分辨率就是 750*1334
4、设备独立像素、逻辑分辨率
设备独立像素（device independent pixels）是操作系统定义的一种像素单位，应用程序将设备独立像素告诉操作系统，操作系统再将设备独立像素转化为设备像素，从而控制屏幕上真正的物理像素点。
逻辑分辨率：375*667
相信我们所有前端开发者，都是见证了手机这个移动设备发展的过程。从蓝屏手机，到彩屏手机，到诺基亚研发出来触屏手机，再到智能手机一步步发展下来，我们的手机越来越清晰，越来越大，所以我们的屏幕发展也越来越迅速。
上图可以清楚的看到，不同分辨率所带来的的差距。
从最初的颗粒感相当大的屏幕，到720p再到1080p，甚至于现在各家旗舰手机的2k屏幕，我们的物理分辨率在变得原来越大。这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，你担忧的问题，我们的乔布斯在很多年前就想到了。这就是我们的逻辑分辨率
6、设备像素比
设备像素比device pixel ratio简称dpr（物理像素和设备独立像素的比值）
7、像素密度（PPI）
每英寸中显示的像素数，通常使用ppi来作为像素密度的单位
PPI=屏幕斜边的长度/屏幕尺寸
PPI越大,设备像素的值越多，屏幕就会越清晰
同面积中PPI越多，屏幕就会越清晰
8、视口
●布局视口●视觉视口●理想视口那么在移动端如何配置视口呢？ 简单的一个meta标签即可！在写移动端的时候一定要加上下面的代码，快捷键：meta:vp + tab
当我们不加视口的时候，模拟移动端，body的宽度默认是980px,并不是手机屏幕的宽度，如果想要把咱们的页面在手机屏幕中显示完全，就会进行缩放，这样的话，里面的文字等就会看不清楚，为了避免这种情况，通常咱们会加视口，让页面的宽度等于手机屏幕的宽度。
理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。
于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！
9、解决适配方法
rem
rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
//假设我给根元素的大小设置为14px
html{
font-size：14px
}
//那么我底下的p标签如果想要也是14像素
p{
font-size:1rem
}
//如此即可
那我们做移动端的响应式开发，如果纯粹用之前所说的媒体查询，那么我们的代码就会很多，写起来也不是很方便。那么怎么办呢？ 我们就可以结合我们的rem。
rem做移动端的思想
当我们拿到设计稿的时候，如果可以按照设计稿的尺寸去写，然后通过更改一个值，就能更改页面中所写的css，那是不是会很方便，rem刚好就是。 1rem=html的字体大小（默认情况下是16px）；
如果我们随着移动端屏幕的改变，然后改变下html的字体大小，就可以达到刚才的目的。
屏幕的宽度/设计稿的尺寸=x/100; 根据这个计算公式我们是不是可以算出移动端屏幕改变时候的根元素应该具有的字体大小。
rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应，
如此我们只需要给设计稿的px转换成对应的rem单位即可
<script>
(function () {
function computed() {
const desginWidth = 375
const clientWidth = document.documentElement.clientWidth
const scale = clientWidth / desginWidth
document.documentElement.style.fontSize = `${scale}px`
}
computed();
window.onresize = function () {
computed();
}
})();
</script>
rem只是一种过渡，注定被淘汰，因为用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。
vh/vw
1vw是相对视口宽度的1%
1vh是相对视口高度的1%
不过这也是需要转换 vh到px的一个转换，比较麻烦，不过到后期工程化会有webpack，webpack解析css 的时候用postcss-loader，能自动实现px到vw的转化
px为主，vw/vh为辅，搭配一些flex（推荐）
总结：移动端适配流程
1. 在head 设置width=device-width的viewport‘
2. 在css中使用px
3. 在适当的场景使用flex布局，或者配合vw进行自适应
4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
5. 在跨设备类型如果交互差异太大的情况，考虑分开项目开发
移动端的几个点
1、移动端边框不能识别0.5px，不兼容。所以我们需要借助c3的属性transform：scale（0.5）
2、禁止用户选择页面中的文字或者图片（user-select: none;）
10、移动端趣拼项目
移动端布局
