zoukankan      html  css  js  c++  java
  • 常用 css rem 根字体

     计算公式:

     写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度

     因此: 写入CSS的尺寸 = UI图标注的尺寸/UI图宽度*屏幕宽度

     比如:当标注尺寸为64px、UI图宽度为1440px时,针对不同屏幕宽度,写入CSS的属性分别为:

     屏幕宽度320px:font-size: 64/1440*320 = 14.22px

     屏幕宽度360px:font-size: 64/1440*360 = 16px

     屏幕宽度375px:font-size: 64/1440*375 = 16.67px

     屏幕宽度1440px:font-size: 64/1440*1440 = 64px

     于是媒体查询就如下:

    @media (min- 320px) {
        html {
            font-size: 14.22px;
        }
    }
    
    @media (min- 360px) {
        html {
            font-size: 16px;
        }
    }
    
    @media (min- 375px) {
        html {
            font-size: 16.67px;
        }
    }
    
    @media (min- 1440px) {
        html {
            font-size: 64px;
        }
    }

    常用的rem +媒体查询如下

    根据设计图尺寸进行换算

    @media (min-320px){
      html{
        font-size: 14.2222px;
      }
    }
    @media (min-360px){
      html{
        font-size: 16px;
      }
    }
    @media (min-375px){
      html{
        font-size: 16.6667px;
      }
    }
    @media (min-412px){
      html{
        font-size: 18.2857px;
      }
    }
    @media (min-480px){
      html{
        font-size: 21.3333px;
      }
    }
    @media (min-640px){
      html{
        font-size: 28.4444px;
      }
    }
    @media (min-720px){
      html{
        font-size: 32px;
      }
    }
    @media (min-768px){
      html{
        font-size: 34.1333px;
      }
    }
    @media (min-1440px){
      html{
        font-size: 64px;
      }
    }
  • 相关阅读:
    蒟蒻的填坑计划
    现在的状态....
    date modify
    set source
    image source
    simple auth
    net
    bridge
    iptable
    namespace
  • 原文地址:https://www.cnblogs.com/Doduo/p/7765297.html
Copyright © 2011-2022 走看看