html-day15手机端知识点

物理像素：屏幕出厂就确定的  
css像素：逻辑像素，css里面的px的单位
dpr设备像素比 = 物理像素/逻辑像素;
移动端视口的设置/理想视口的设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式：一套代码，能够适配多个平台，不论屏幕尺寸或者设备类型都能显示比较正常的效果。
原理：利用媒体查询 @media

1.使用百分比。
2.使用rem + js的方式
    默认情况 1rem = 16px;
    项目中，应该给html设置的文字大小 = 量取的设计稿的宽度 * 100 / 750
           设计稿中的元素的尺寸 = 量取的尺寸 / 文字大小100  [转换成rem的公式]
    1.使用pxtorem插件完成单位的转换 【注意记得修改插件中html的文字大小】
    2.引入js文件-实现根据屏幕大小调整html文字大小的功能
        <script src='js文件的路径'></script>
3.使用vw和vh单位
    视口的宽度，默认为100vw;
    视口的高度，默认为100vh;

column-width:*px;  每列的宽度
column-count:*;    分割的列数
column-rule:*px 线型 颜色;  列边框
column-gap:*px;     列间隔

transform:转换的函数;
1.位置转换-位移
    transform:translate(x,y);
    transform:translateX(x);
    transform:translateY(y);
    transform:translateZ(z);
    transform:translate3d(x,y,z);
2.旋转
    transform:rotate(*deg);
    transform:rotateX(*deg);
    transform:rotateY(*deg);
    transform:rotateZ(*deg);
    transform:rotate3d(x,y,z,*deg);   [x,y,z处是0或者1的数字，0代表该方向不旋转，1反之];
    注意：位移和旋转是有区别的，位移在前是在移动的基础上进行旋转；旋转在前是在旋转的基础上进行位移。
3.放缩
    transform:scale(w,h);  【w是宽度的倍数，h是高的倍数】
    transform:scaleX(x);  
    transform:scaleY(y);  
    transform:scaleZ(z);  
    transform:scale3d(x,y,z);  

设置舞台的类型：transform-style: preserve-3d | flat;  [3d或者平面]
设置变形的基点：transform-origin:x坐标 y坐标 | 方向的英文;
设置背面是否可见： backface-visibility:visible | hidden;
设置景深：perspective: *px;    [观察者距离被观察物体之间的距离]

1.给div设置宽高为0
2.给他四个边设置为透明色     border:*px solid transparent;
3.给想要保留的三角形对应的边框设置指定的颜色;   
如果用伪元素实现三角形
    元素:after{
        content:'';
        display:block;
        ....三角形规则
    }
    ex:聊天框

1.选中a后面相邻的兄弟b          a+b
2.选中a后面的所有兄弟b          a~b
3.当选中input的时候，给他的兄弟b设置样式   input:checked~b   

position:sticky;
left | right:*px;
top | bottom:*px;
ex:工商银行
position:static | fixed | absolute | relative | sticky;