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;
      }
    }
  • 相关阅读:
    mysql 查看存储过程 并导出
    mysql 添加记录或者删除记录
    mysql 修改表的字段
    搭建docker私有仓库
    安装gitlab并配置邮箱
    Mac 安装MySQL-python
    android studio 调试安装
    给定日期求星期几
    数字三角形
    程序设计实训-课程表管理系统项目中遇到的问题
  • 原文地址:https://www.cnblogs.com/Doduo/p/7765297.html
Copyright © 2011-2022 走看看