zoukankan      html  css  js  c++  java
  • html5自适应

    html5自适应

    参考博客:

    https://blog.csdn.net/weixin_41228671/article/details/89089362

    https://blog.csdn.net/qq_34020571/article/details/78923089

    https://www.cnblogs.com/chenhuichao/p/11763135.html

    https://www.php.cn/html5-tutorial-379312.html

    一.什么是自适应?

    二.与响应式的区别?

    三.怎么设计?

    计算公式:

    参数:设计稿尺寸,元素尺寸,html字体尺寸

    1.增加meta:

    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

    也可以通过动态js方式设置meta

    var scale = 1 / devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    2.使用media query(媒体查询):下面是个例子,可以变通

    @media only screen and (max- 360px) and (min- 320px) {
                    html {
                        font-size: 13.65px;
                    }
                }

    3.使用rem单位:

    12.5rem;

    4.使用百分比单位:

    20%;
  • 相关阅读:
    权限认证机制
    在线工具统计
    Redis内存模型
    Redis数据结构
    开发工具清单
    MySql数据库优化、备份和恢复
    MySql 性能优化神器 Explain
    ASP.NET Core 3.1 迁移到 NET 5.0
    MySql Sql语句
    DTU的通讯工作模式有哪些
  • 原文地址:https://www.cnblogs.com/zlp520/p/13881466.html
Copyright © 2011-2022 走看看