仿美团界面之day01

1、移动端响应式

1.1 响应式尺寸

• 移动端屏幕的尺寸是特别多的，所以不可能像pc端那样，将尺寸固定死。移动端开发的时候，尺寸是不建议写死单位的，如 固定值为多少px，因为多少px无论在哪种设备上面都是一样的效果，所以大小尺寸不同的设备给用户的界面效果是不一样的！
• 希望有一种单位可以实现屏幕尺寸的一个动态变化！

1.2、解决方案

• rem单位是一种解决方案。

  • 视口问题

    <!-- 移动端，响应式开发必须具备的！ -->
    <meta name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    

  • rem思路

    • rem是一个相对单位！ 1rem 的大小等于 html标签的font-size大小！ 默认html标签的font-size是16px. 也就是说 1rem 默认等于 16px

    • 默认

      html{
                font-size:16px /*默认*/ }
      .box{
               
          width:10rem;    /* 160px */
        	height:10rem;
      }
      

    • 修改

      html{
                font-size:20px /*默认*/ }
      .box{
               
          width:10rem;    /* 200px */
        	height:10rem;
      }
      

    • 如果说我们网页里面的所有单位都使用了rem去实现，也就是说所有的尺寸大小都依赖于html标签的font-size大小， 我们可以通过js去实现控制 在不同屏幕尺寸下面去修改html标签的font-size大小！这样就可以实现不同屏幕下所有页面内容的大小动态变化。

  • 如何实现rem的变化！

    • UI设计师在设计移动端的，宽度是以 375位尺寸（iPhoneX），高度是根据内容决定的。设计师新建的画布是 750px的。因为设计师设计移动端的时候一般都是2倍图！

  • 默认rem是设计为多少呢？

    • 1rem = 100px 呢？？？
    • 目的： 为了换算容易！

  • 实现

    function setRem() {
           
        // iphone6
        var defaultRem = 100;     // 基准默认rem大小   使用100的原因是想 计算方便！
        var designWith = 750;    //  基准屏幕设计图尺寸大小
        // 当前设备信息
        var screenWidth = window.innerWidth;    // 获取屏幕宽度！
        //  推出当前设备的rem尺寸大小是多少px