移动端书写技巧、线性渐变、动画、网格布局--第十五十六十七十八天

# 二、移动端的书写

1、移动端的基本概念

2、DPR：像素比。设备像素、逻辑像素

    - 一般iphone都在2~3倍

3、视口

    - 布局视口：设计图尺寸

    - 视觉视口：眼睛看得见的尺寸

    - 理想视口：设计图尺寸   ====  眼睛看得见的尺寸

        - 设置viewport的mata标签的属性

4、移动端的布局方式

    - 弹性布局

        - 位置不变，尺寸不变，动态响应，弹性设置

        - 弹性盒

    - 等比例布局

        - 整个页面的所有内容，都根据屏幕尺寸的修改，等比例缩放

        - 响应式单位：rem  vw  %    1px的边框

5、移动端布局技术

    - 自适应  响应式 -媒体查询  

    - 弹性盒  响应式单位

6、布局小技巧

    - 上下固定，中间滚动

    - 上下固定，中间固定，两侧滚动

# 三、css3新增的渐变属性值

1、渐变：某个区域，沿着某个方向，从某个颜色过渡到另外一个或者多个颜色的性质

    - 渐变，其实是一种图片的性质，要通过背景图属性添加给容器

        - background-image  或者（background）

2、线性渐变

3、经向渐变

 

# 四、页面重构

1、分离公共css区域

2、复杂页面的结构划分

# 二、css3新增 -过渡，转换、动画

1、过渡

    - 某个样式属性随时间的变化，从默认值到另外一个指定值的

    - transition：all（width、height） 过渡时间；

    - 必须配合一个动作

2、动画

    - 定义动画

        - @keyframes

    - 使用动画

        - animate

    - 可以实现自动动画，不需要配合动作，也开头实现动画

3、变换

    - 属性

        - transform

    - 形式

        - 位移

        - 旋转

        - 缩放

        - 扭曲

    - 位面

        - 2d

        - 3d

# 二、 网格布局 guid

1、网格布局grid

    - 行和列组成

        - 行高和列宽可以定制

        - grid-template-rows：100px  、、、、repeat（3，10% 100px）

        - grid-template-columns：20%  、、1fr

    -行线和列线

    - 可以设置不同的单元格的位置，和跨域的行线和列线区域

        - grid-area：单元格的名字

        - grid-area：r-strat

    - 网格的对齐方式

        - 单元格的自身对齐方式

            - place-content

        - 单元格的内容

            - place-items