预处理器和移动端布局

1.calc函数
2.css预处理–less
1)什么是预处理？
定义了一种新的语言
基本思想：用一门专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者只需要使用这种语言进行编码工作即可。
2）less：拥有一套自定义的语法和解析器，将程序员编写的样式规则，通过解析器编译成对应的css文件，才能被浏览器所识别。
编译的方法：命令行编译、编译器编译、在线编译、第三方编译工具
好处：结构清晰，便于扩展，可以屏蔽浏览器中私有语法的差异，可以实现多重继承，完全兼容css代码
3）编写less文件
新建less文件：.less文件 @charset “utf-8”;
4）less的基本语法(注 导 变 混 嵌 继 运)
注释：
标注css注释：/ 注释风格 / 会保留到编译后的文件中
单行注释：//注释内容 只保留到less原文件中，编译后的文件中会被省略
导入样式：@import 可以导入css文件，导入less文件
@import ".css";
@import url(.css);
@import url(".css");
注意：分号是必不可少的，文件的后缀名也是必不可少的
@import和link的区别：
@import是样式中定义；link是标签，link可以引入别的；
载入顺序问题：
兼容问题：
变量：
定义变量：@变量名:值;
使用:
作为属性值使用——.box{background:@变量名;}
作为属性名称使用——

@le:left;
.box{border-@{le}:5px solid #000;}
作为选择器名称使用——
.@{le}{height:20px;}
混入：将一种或一系列的属性从一个规则集引入到另外一个规则集
混入类名:
定义通用属性：.bw{width: 300px;} 在解析后的css文件中可以被看见
.bBor(){border: 5px solid #000;} 在解析后的css文件中看不到
调用定义好的属性：.wrap {.bw;}
混入参数：
定义：.boRa(@radius){border-radius:@radius;}
调用：.box{.boRa(20px);}
注意：混入参数没有设置默认值，调用时必须传值
定义：.boRa(@radius:20px){border-radius:@radius;}
调用：.box{.boRa;}
.box{.boRa(30px);}
注意：混入参数设置了默认值的，调用时如果不写参数，相当于使用默认值作为参数
使用关键词@arguments来引入所有传入的参数
使用@arguments引用所有的传入的参数
.boSha(@bX,@by,@bb,@bc){box-shadow: @arguments;}
.bo(@bwi:10px,@bs:solid,@bcol:#0f0){border: @arguments;}
.wrap3{
.boSha(10px,10px,20px,#000);
.bo;
.bo(5px,dotted);
}
嵌套：模仿html结构
选择器嵌套：
&表示引用父元素
继承：extend伪类实现样式的继承
.ftStyle{font-style: italic;}
.wrap5{h3{font-size: 50px;&:extend(.ftStyle);}}
.wrap5{h3:extend(.ftStyle){font-size: 50px;}}
运算：任何数值、颜色、变量都可以运算
1)变量
2)数值
3)颜色运算：先将颜色色值转换成rgb模式，进行计算，再将rgb模式转回十六进制色值，并返回
rgb模式的取值范围0-255，如果计算时超过这个区间，使用超过后接近的范围值呈现
.wrap6{
background-color: #000 + 20;
//#000–rgb(0,0,0) + 20 – rgb(20,20,20)–#141414
}

3.移动端的浏览器
UC浏览器、QQ浏览器、百度手机浏览器、360浏览器、Chrome浏览器、搜狗手机浏览器、猎豹浏览器
内核为webkit
4.viewport设置–虚拟窗口
Apple为了解决移动端屏幕分辨率大小问题提出
移动端视口：布局视口、视觉视口、理想视口
布局视口：宽度768-1024，页面内容展示区域
视觉视口：屏幕大小，用户能看到的区域
理想视口：viewport

自定义虚拟窗口：指定虚拟窗口的宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放。
content:
width–虚拟窗口的宽度，device-width设备宽度，
initial-scale–初始缩放比例
maximum-scale–最大缩放比
minimum-scale–最小缩放比
user-scalable=yes|no–是否允许用户手动缩放
user-scalable=no–不允许用户手动缩放
user-scalable=yes–允许用户手动缩放，默认值
5.常见移动端布局方案
1）流式布局——宽度自适应适配方式
垂直方向高度固定，水平方向使用百分比实现，并且使用弹性布局、浮动技术、定位等技术综合使用，创建可扩展的流式布局方案。
优点：可以很好的解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2）rem布局
rem——相对于根元素的字号大小属性值的单位，css3新增单位
未经调整的浏览器默认字号为16px,1rem = 16px
rem布局的实习：
设置压面的viewport；
动态计算并设置html的font-size;
按照PC端布局方式正常布局，将px换算成rem单位
3)vw适配：
vw——viewport’s width css3规范中视口单位
vh——viewport’s height css规范中虚拟窗口的高度
vw和vh都是将屏幕分成100份，1vw=屏幕宽度的百分之一
iPhone5 320 1vw=3.2px 多少个vw是100像素 100 * 1vw/3.2 = 31.25
iPhone6 375 1vw=3.75px 多少个vw是100像素 100 * 1vw/3.75 = 26.66
vw布局方式：750px宽度 100vw=750px 1vw=7.5px 1px=0.13vw
兼容：IE9+ IOS6.1+ Android4.4+
在PC端使用时注意滚动条，移动端滚动条不占位
vw+rem——750px
1vw=7.5px 1px=0.13vw
假设1rem = 100px,100px = 13.33vw,
html{
font-size:13.33vw;
}

6.媒体查询
1）什么是媒体查询
根据设备显示器的特性为它设置css样式，css2针对不同媒体类型，c3针对不同设备
媒体查询可以检测的内容：viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率
2）引入方式：
在样式表中引入——在style标签对中引入，在外部样式表中引入,在正常文件之后
@media mediaType and (madia feature){
选择器{属性：属性值;}
}
mediaType设备类型：
all 适用于所有的多媒体设备;
print 适用于打印机或打印预览；
screen 电脑屏幕、平板电脑、智能手机等；
speech 屏幕阅读器等
madia feature媒体特性表达式：
width:浏览器的宽度；height:浏览器的高度；
max-width:最大宽度；min-width：最小宽度
max-height:最大高度；min-height：最小高度
device-width:设备宽度；device-height：设备高度； max-device-width:最大设备宽
orientation 设备方向
aspect-ratio:1/2可视区宽度和高度的比率
device-ratio:1/1输出设备的屏幕可见区宽度和高度的比率
使用link标签引入：

7.项目
1. 专门针对IE8新增加的特殊的文件头的标记，用来为IE8指定不同的页面渲染模式，在IE8之外的浏览器不识别
2.底部
1） position: fixed;
left: 0;
bottom: 0;
box-sizing: border-box;
width: 100%;
2） position: fixed;
left: 0;
bottom: 0;
box-sizing: border-box;
width: calc(100% - 0.49rem - 0.67rem);

2.移动端特殊处理
1）超小字体处理——transform:scale();
2)动画定义3D启用硬件加速——开启GPU硬件加速模式
从CPU-GPU
-webkit-transform:translate3d(0,0,0)
transform:translate(0,0,0);
3）圆角bug:部分Android手机圆角失效
background-clip:padding-box;
4)Input的placeholder会出现文本位置偏上的情况：
在input输入文本垂直居中的情况下，给placeholder设置padding-top，不设置行高
3.设备像素、独立像素和css像素
1）设备像素——物理像素（屏幕的最小颗粒）
设备固有属性，是真实存在的，不会改变
早期只有物理像素，在不缩放的情况下，1px=1物理像素
iPhone6/7/8的物理像素7501334，
设备分辨率：显示器的宽度和高度分别是多少个物理像素
2）设备独立像素——独立像素，逻辑像素
操作系统定义的像素单位
iPhone6/7/8的独立像素为375667，正好是物理像素的一半
逻辑分辨率：使用屏幕的宽度*高度来表示

设备像素比DPR——不同型号手机物理像素和独立像素的关系；
    设备像素比 = 物理像素/独立像素

3）css像素：
width:100px; 在放大200%后，宽度依然是100px,一个px表示的大小会变成原来的2倍
原本的元素宽度为100个独立像素，缩放200%后，元素的宽度会变为200个独立像素
css像素和独立像素的关系：
缩放比例=css像素的边长/独立像素的边长
在缩放比例为100的情况下，一个css像素为一个独立像素
设备像素比：css像素和物理像素的关系
4.视网膜屏——Retina显示屏：一个逻辑像素中有多个物理像素
1像素边框问题:
border-width:thin;//thin细边框、medium中等、thick粗
5.轮廓outline：不占位
outline:none;去掉输入框轮廓线
outline:轮廓宽度 轮廓线性 轮廓颜色；
outline-offset属性：对轮廓进行偏移
6.letter-spacing属性：字间距
7.word-spacing属性：词间距

1.移动端布局方案——flexible.js+rem
一般使用这个布局 就是字体不变 宽高一直变得情况下才使用
解决的html5页面终端适配
设备划分成10份，确定好html标签的font-size属性值
750px,html{font-size:75px;},页面中元素的rem值 = 元素的px值/75
使用方法：
1）在head标签中添加插件
方法一：直接将插件下载到本地，通过script标签对链接;
方法二：通过script标签对，加载阿里CDN文件：

2)将视觉稿中的px转换成rem

dpr设备像素比：一个物理像素里有多少个css像素

响应式布局方案：
1.什么是响应式布局：
一个网站能够适配多个终端，能够实现不同屏幕分辨率的终端上都能够实现较好的显示效果，而且不需要为每个终端定制一个特定的版本。
响应式布局的组成：弹性盒布局、图片、css media query的使用等等
响应式布局的原理，通过媒体查询检测不同的设备屏幕尺寸。适当调整标签显示布局，在每种设备屏幕宽度下呈现出不同的页面效果
2.技术要点
1）meta标签的设置

IE8及更早版本的浏览器中不支持媒体查询，需要使用media-queries.js或respond.js增加IE对媒体查询的支持

   <!-- [if lt IE 9]>
        <script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js">
        </script>
    <![endif]-->

    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
        调用chrome浏览器或IE高版本浏览器
    <meta name="HandheldFriendly" content="true"> 
        兼容不支持viewport的设备
2）使用媒体查询适配对应样式
    常用的屏幕尺寸查询：
        超小屏幕下： 手机 < 768px
        小屏幕下：   平板 >=768px 
        中等屏幕：   桌面 >=992px
        大屏幕：     桌面 >=1200px
    移动端优先：超小型设备 手机 768px
    @media screen and (min-width:768px){ 平板电脑 }
    @media screen and (min-width:992px){ 台式电脑 }  
    @media screen and (min-width:1200px){ 大台式电脑 } 
    大屏幕优先：大台式电脑 1200px
    @media screen and (max-width:1200px){ 台式电脑 }
    @media screen and (max-width:992px){ 平板电脑 }
    @media screen and (max-width:768px){ 手机 }
3）响应式字体设置：
    rem单位相对于html元素{font-size}值做相应的调整
    em单位相对于父元素的font-size值做调整
4）百分比布局：
    宽度不固定，可以使用百分比；内外间距（左右方向）也可以使用百分比
    在实现的过程中需要布局容器
        手机 < 768px 布局容器的宽度100%
        平板 >=768px 设置宽度750px
        中等 >=992px 设置宽度970px
        大屏 >=1200px 设置宽度1170px
    浮动、定位、弹性盒子
    响应式内容：
        img标签：前景图，可以通过max-width属性控制图片的大小，height:auto;可以转块，调整间隙
        响应式背景图片：background-size属性调整背景图的尺寸

3.响应式优缺点：
优点：一站适配所有终端；减少了工作量；节省时间；每个设备都能得到较好的设计
缺点：会加载更多的样式和脚本资源，设计难于精确控制；老版本的浏览器中兼容性不好
Day23
移动端布局方案：
1.流式布局：宽度使用百分比代替px，高度使用px固定,
优点：可以很好的解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2.rem布局：添加viewport,动态修改html的font-size属性 页面中元素尺寸单位使用rem
3.vw布局：vw和vh视口宽和高，将屏幕平均分成100份，1vw=屏幕宽度的百分之一，不需要js
4.flexible.js + rem :将屏幕分成10份，只需要确定好当前设备的html标签的font-size属性值即可
5.响应式布局：一个网站能够适配多个终端

Grid网格布局
flex布局——轴线，可以看成一维布局
1.基本介绍
Grid网格布局——二维布局
可以将容器分成“行”、“列”，产生单元格
2.基本概念
容器container——使用网格布局的区域
项目items——容器内使用网格定位的子元素

行row——容器中的水平区域
列column——容器中的垂直区域

单元格cell——行和列交叉的区域
m行n列产生的单元格数为m*n

网格线 grid line——划分网格的线，m行有m+1根水平网格线，n列有n+1根垂直网格线

3.相关属性：
步骤：1.父元素网格布局；2.网格的行数和列数；3.网格的间隙；4.网格排列的顺序；5.容器中内容的分布属性6.容器中对齐7.定义网格区域
容器属性——写在父元素上
1）display属性:
display:grid;容器采用网格布局
2）grid-template-rows属性：grid-template-columns属性——对容器的水平方向和垂直方向划分
属性值：像素值|百分比（父元素）|auto(自适应)|repeat()|fr|minmax()|网格线的名称
repeat(),有两个参数，第一个参数表示重复的次数，第二个参数表示重复的值
fr(比例关系，值大于等于1,小于1有空白)
minmax(),表达最大值和最小值
网格线名称
grid-template-rows:[r1] 100px [r2] auto [r3] 100px;
grid-template-column:[c1] 100px [c2] auto [c3] 100px;
3)grid-row-gap属性、grid-column-gap属性、grid-gap属性：
定义网格中的网格间隙
grid-gap:grid-row-gap grid-column-gap;
4)grid-auto-flow属性——子项排列的顺序
属性值：row(默认值，先行后列)|column(先列后行)
5)justify-items属性、align-items属性、place-items属性:网格中的内容的分布属性
justify-items属性:水平呈现方式
属性值：start(内容靠左)|end(内容靠右)|center(内容居中)|stretch(默认值,占满整个网格)
align-items属性：垂直呈现方式
属性值：start(内容上)|end(内容靠下)|center(内容居中)|stretch(默认值,占满整个网格)
place-items:align-item justify-items( 垂直方向 水平方向)
6)justify-content属性、align-content属性、place-content属性：网格元素分布情况
justify-content属性:水平分布方式
属性值：
start(内容靠左)|
end(内容靠右)|
center(内容居中)|
space-between（项目和容器之间没间隔，网格之间有间隔）|
space-around(项目和容器之间有间隔，网格之间有间隔，两个间隔大小不一样)|
space-evenly(项目和项目之间，项目和容器之间距离相等)
align-content属性、:垂直分布方式
属性值：start(内容靠左)|end(内容靠右)|center(内容居中)|space-between|space-around|space-evenly
place-content属性：justify-content align-content
7）grid-template-areas属性:定义网格区域
grid-template-areas:“box1 box1 box1”
“box2 box2 box3”
“box2 box2 box3”;
应用在子项目的属性：grid-area属性，规定项目所在的区域
.wrap div.:nth-child(1){grid-aera:box1}
.wrap div.:nth-child(2){grid-aera:box2}
.wrap div.:nth-child(3){grid-aera:box3}
项目属性：
1）项目的位置：起始和结束可以决定项目所占区域的大小
grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性

grid-column-start属性:水平填充，左边框所在的垂直网格线
grid-row-start属性：垂直填充，上边框所在的水平网格线

grid-column-end属性:水平填充，右边框所在的垂直网格线
grid-row-end属性：垂直填充，下边框所在的水平网格线
grid-row-end:span 2;所在网格的数量，只有在end只有span关键字

简写；
grid-colume:grid-column-start / grid-column-end;
grid-row:grid-row-start / grid-row-end;
grid-row:2/span 2;

2）justify-self属性、align-self属性、place-self属性
justify-self属性:水平方向对齐方式(单元格的内容)
属性值：start|end|center|stretch
align-self属性:垂直方向对齐方式(单元格的内容)
属性值：start|end|center|stretch
place-self属性:垂直方向 水平方向
常用有效内容宽：
1200px
1100px 1000px 1024px
992px 980px
768px 720px
640px
480px
320px