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;
      }
    }
  • 相关阅读:
    正则表达式
    什么是面向对象
    关于jdk,jre,jvm和eclipse的一些总结
    分析ajax爬取今日头条街拍美图
    pycharm误删恢复方法及python扩展包下载地址
    django 之 视图层、模板层
    django
    django框架基础二
    jdango框架基础一
    安装软件,提高速度,可以使用清华源
  • 原文地址:https://www.cnblogs.com/Doduo/p/7765297.html
Copyright © 2011-2022 走看看