zoukankan      html  css  js  c++  java
  • 手机端自适应字体大小和元素宽度自适应

    以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。

    这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义,media定义好之后,拿起键盘就是干。

    字体、宽高都用rem来定义,此方法略爽!

    @media (min-0px){
        html{font-size:12px;}
    }
    @media (min- 320px){
        html{font-size:12px;}
    }
    @media (min- 340px){
        html{font-size:13px;}
    }
    @media (min- 360px){
        html{font-size:14px;}
    }
    @media (min- 380px){
        html{font-size:15px;}
    }
    @media (min- 400px){
        html{font-size:15px;}
    }
    @media (min- 420px){
        html{font-size:16px;}
    }

    现在找到了一个方法,页面插入一段js,切图时看设计稿多宽页面就定义多大的宽度,字体的大小和内容的宽高就看设计稿的px

    比如是24px,那么写样式就是1.5rem

    这个时候牵扯算法1rem = 16px

    <script type="text/javascript">
        function fontSize(){
            var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
            document.documentElement.style.fontSize=(deviceWidth/25)+"px";
        }
        fontSize();
        window.onresize=fontSize;
    </script>

    插入一段我自己写的测试例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <title>自适应字体大小和元素高度</title>
        <style type="text/css">
            *{margin: 0;padding: 0;text-align: center;}
            h1{font-size: 2rem;padding: 2rem;}
            p{font-size: 1rem;padding: 1px;}
            div{width: 5rem;height: 4rem;background-color: #f00;}
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            function fontSize(){
                var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
                document.documentElement.style.fontSize=(deviceWidth/25)+"px";
            }
            fontSize();
            window.onresize=fontSize;
        </script>
    </head>
    <body>
        <h1>标题</h1>
        <p>内容</p>
        <div></div>
    </body>
    </html>

    这个方法px准确率高,唯一美不中足的是算起来麻烦,两种方法看个人习惯了

  • 相关阅读:
    oracle中number数据类型简单明了解释
    计算机专业课程体系介绍(含学习顺序)
    浮点数的二进制表示
    C语言中为什么float型数据的范围是3.4E-38~3.4E+38
    C语言学习笔记
    近期学习计划
    二进制、八进制、十进制、十六进制之间转换
    MySQL 字段值为NULL,PHP用json转换,传给js,显示null
    写出float x 与“零值”比较的if语句——一道面试题分析
    BOOL,int,float,指针变量 与“零值”比较的if语句
  • 原文地址:https://www.cnblogs.com/wangjae/p/6814349.html
Copyright © 2011-2022 走看看