Web移动端第六天

rem的原理使用

作用：移动端的屏幕适配（手机屏幕越大 看到的元素就越大） 使用的非常多 ！！！ 巨多！！！ 特别多！！！ 必备！！！

原理

公式：要适配的手机中的div宽度 = (要适配的手机屏幕10rem) * 设计稿中div的宽度 / 设计稿宽度

1. rem单位是相对单位（找到参照物）

   参照的跟标签(html)的font-size

2. 如果自己不设置html的字体大小

   1rem = 16px (谷歌浏览器默认的字体大小是16px)

3. 如果设置了html的字体大小设置喂1px

   1rem = 1px？

   但相对于字体来说最小还是12px(谷歌) 火狐(最小文字1px)

4. 小结

   1. 1rem大小是相对于页面根标签的字体大小
   2. 不要去研究rem小于12px的时候的情况(自己设置尽可能将html的字体设置为大于等于12px 避免问题即可)

使用

要注意引入js包

<script src="./js/flexible.js"></script>

安装插件使用

在vscode中搜索px to rem & rpx(cssrem),然后再设置中写上"cssrem.rootFontSize": 37.5,

vw、vh的原理使用

原理

公式：要适配的手机中的div宽度 = (要适配的手机屏幕100vw) * 设计稿中div的宽度 / 设计稿宽度

1. vw和vh都是相对长度单位 都是相对于屏幕宽度和高度
2. 100vw = 屏幕的宽度 100vh = 屏幕的高度

使用

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box1 {
            /* 运算用calc()包起来 */
            /* 手机中盒子的宽度 = 手机屏幕的宽度(默认100vw占满手机全屏) * 设计稿中盒子的宽度 / 设计稿的宽度 */
            width: calc(100vw * 50 / 375 );
            height: calc(100vw * 50 / 375 );
            background-color: skyblue;
        }
        .box2{
            width: calc(100vw * 100 / 375 );
            height: 26.6667vw;
            background-color: pink;
        }
    </style>

安装插件使用

在vscode中搜索px2vw,然后再设置中写上"px2vw.width": 375,