十四章 手机端和响应式

一、常用单位

        像素：px==固定单位；

        百分比：%==相对单位，相对于父级的百分之多少；

        em:相对单位，1em=父级的字体大小；

        rem:相对单位，1rem=根目录的字体大小，根目录是HTML/rot大小,不设置默认是16px;100px=6.25rem； 10px=0.625rem; 1rem=16px; 12px=1.25rem、14px=0.875rem；

        vw:相对单位，100vw=屏幕视口的可视宽度；当我们需要正方形的时候，可以给一样的单位，都是vw；举例，手机可视屏幕：750vw, 1vw=7.5px可视宽度，10px=1.3vw;

        vh：相对单位，100vh=屏幕视口的可视高度；

二、常见问题

1、100vw和100%有没有区别？

        有的，100vw会比100%多出一个横向滚动条

三、设备像素比：dpr,设备像素比越高，越好，开发尺寸和像素尺寸有区别，所有会有这样的一个比例；

四、手机端常用布局方式

1、百分比布局：适用于多数手机，缺点：计算量过于复杂，没有办法用于字体大小；

2、rem布局：加载js文件-加载js文件，修改宽度尺寸大小-所有数值/100，单位变成rem;

注意：图片以及背景都是需要调大小的

五、写手机端准备工作

        1、meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

        2、基础样式：img{max-width:100%}、不用版心、设置A标签颜色，标成透明，因为苹果a标签有颜色；

        a,input,button{-webkit-tap-highlight-color:rgba(255,0,0,0);}

        3、如果是一屏页面，没有竖向滚动条的，需要设置：html,body{height:100%}

        4、使用HTML标签：header、main、nav、footer；

        5、若写了页面之后不好用，需要刷新一下，若还是不行，需要关闭浏览器，重新加载；

        6、若给了magin-top,用padding-top:1px；去解决的时候，会有滑动条，可以给父级一个怪异盒模型；

六、响应式：一个网站同时适配多种屏幕大小

        media：媒体查询，核心原理

注意：顺序为大屏幕到小屏幕，顺序不可改变，最上面为无mediaPC端；

        and前后必须有空格；

 <style>
        p{
            color: blueviolet;
            font-size: 20px;
        }
        @media screen and (min-width:600px) and (max-width:1200px) {
            p{
            color: rgb(5, 72, 195);
            font-size: 30px;
        }
        }
        @media screen  and (max-width:600px){
            p{
            color: rgb(224, 8, 141);
            font-size: 50px;
        }
        }
    </style>