zoukankan      html  css  js  c++  java
  • 自适应字体配置

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    html, body{
        font-size: 10px;
        padding: 0;
        margin: 0;
    }
    @media screen and (min-321px) and (max-375px){html{font-size:10px}}
    @media screen and (min-376px) and (max-414px){html{font-size:10px}}
    @media screen and (min-415px) and (max-639px){html{font-size:12px}}
    @media screen and (min-640px) and (max-719px){html{font-size:12px}}
    @media screen and (min-720px){html{font-size:16px}}
    @media screen and (min-750px) and (max-799px){html{font-size:23.5px}}
    @media screen and (min-800px)and (max-1199px){html{font-size:25px}}
    @media screen and (min-1200px){html{font-size:30px}}
    div.box{
        font-size: 2rem;
        height: 10rem;
        background: black;
        color: white;
        padding: 1rem;
    }
    </style>
    </head>
    <body>
        <div class="box">
            请缩小窗口试试!
            通过适配,然后控制rem的大小。达到字体或者盒子的自适应
        </div>
    </body>
    </html>
  • 相关阅读:
    mongodb导入导出
    python笔记1
    C# 文件下载断点续传
    热水维修记事
    memcached笔记
    模拟登陆
    Nginx学习笔记之加强篇
    Redis学习笔记之基础篇
    Nginx学习笔记之应用篇
    Nginx 学习笔记之安装篇
  • 原文地址:https://www.cnblogs.com/wenb/p/5968975.html
Copyright © 2011-2022 走看看