设置常见的屏幕尺寸修改里面的 html 文字大小

绝地灬酷狼 2023-01-10 13:30 151阅读 0赞

css 写法

a { 
      text-decoration: none;
    }
    // 一定要写到最上面
    html { 
      font-size: 50px;
    }
    // 320
    @media screen and (min-width: 320px) { 
      html { 
        font-size: 21.33333333px;
      }
    }
    // 360
    @media screen and (min-width: 360px) { 
      html { 
        font-size: 24px;
      }
    }
    // 375
    @media screen and (min-width: 375px) { 
      html { 
        font-size: 25px;
      }
    }
    // 384
    @media screen and (min-width: 384px) { 
      html { 
        font-size: 25.6px;
      }
    }
    // 400
    @media screen and (min-width: 400px) { 
      html { 
        font-size: 26.66666667px;
      }
    }
    // 414
    @media screen and (min-width: 414px) { 
      html { 
        font-size: 27.6px;
      }
    }
    // 424
    @media screen and (min-width: 424px) { 
      html { 
        font-size: 28.26666667px;
      }
    }
    // 480
    @media screen and (min-width: 480px) { 
      html { 
        font-size: 32px;
      }
    }
    // 540
    @media screen and (min-width: 540px) { 
      html { 
        font-size: 36px;
      }
    }
    // 720
    @media screen and (min-width: 720px) { 
      html { 
        font-size: 48px;
      }
    }
    // 750
    @media screen and (min-width: 750px) { 
      html { 
        font-size: 50px;
      }
    }

less 写法

a { 
        text-decoration: none;
    }
    // 一定要写到最上面
    html { 
        font-size: 50px;
    }
    // 我们此次定义的划分的份数 为 15
    @no: 15;
    // 320
    @media screen and (min-width: 320px) { 
        html { 
            font-size: 320px / @no;
        }
    }
    // 360
    @media screen and (min-width: 360px) { 
        html { 
            font-size: 360px / @no;
        }
    }
    // 375 iphone 678
    @media screen and (min-width: 375px) { 
        html { 
            font-size: 375px / @no;
        }
    }
    
    // 384
    @media screen and (min-width: 384px) { 
        html { 
            font-size: 384px / @no;
        }
    }
    
    // 400
    @media screen and (min-width: 400px) { 
        html { 
            font-size: 400px / @no;
        }
    }
    // 414
    @media screen and (min-width: 414px) { 
        html { 
            font-size: 414px / @no;
        }
    }
    // 424
    @media screen and (min-width: 424px) { 
        html { 
            font-size: 424px / @no;
        }
    }
    
    // 480
    @media screen and (min-width: 480px) { 
        html { 
            font-size: 480px / @no;
        }
    }
    
    // 540
    @media screen and (min-width: 540px) { 
        html { 
            font-size: 540px / @no;
        }
    }
    // 720
    @media screen and (min-width: 720px) { 
        html { 
            font-size: 720px / @no;
        }
    }
    
    // 750
    @media screen and (min-width: 750px) { 
        html { 
            font-size: 750px / @no;
        }
    }