2022年7月28日 移动端适配

移动端适配：

        单位： em        px        rem        %百分比         

不同设备的默认视口不一样，苹果系列一般是980，视口的缩放比：

        缩放比=设备宽度/视口宽度，390/980=0.4，100px===》100*0.4=40

产生的问题：css中的px  !=

修改了header要重新运行

viewport：视口，配置视口

width：视口宽度=device-width(设备宽度)不设置时，不同设备的默认视口不同

initial：缩放比，不配置视口，缩放比默认是设备宽度/视口宽度

maximum-scale：设置最大缩放比，优先级高于initial-scale

minimun-scale：设置最小缩放比

user-scale：yes/no    1/0，设置是否允许用户缩放

媒体查询：

        媒体：手机/平板/电脑屏幕screen、打印机(print)

        作用：当屏幕宽度在某些范围时，样式的变化

        写法：@media 媒体/all(所有媒体)

        关键字：

                and(并且)

                not(非)

                only(基本不用)

媒体特性：

        width：宽度

        min-width：最小宽度

        max-width：最大宽度

移动设备的屏幕适配区间：

        <768超小屏幕

        768<=宽度<992小屏幕

        992<=宽度<1200中等屏幕

        宽度>1200大屏幕

vw   vh单位：view-width(视口宽度) view-height(视口高度)

        0-100vw：视口宽度百分比

        0-100ch：视口高度百分比

动态计算字体大小：

        标准宽度390px   1rem    16px        414px   1rem   xpx

        :root{font-size:calc((100vw * 16)/414(414是移动端视口宽度))}

​​​​​​​