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>
  • 相关阅读:
    c语言之数据类型
    C语言之概述
    012.day12
    011.day011
    010.day010
    010.day08
    010.周六自习
    009.day07
    008.day06
    007.day05
  • 原文地址:https://www.cnblogs.com/wenb/p/5968975.html
Copyright © 2011-2022 走看看