• @media screen页面自适应尺寸!!


    @media screen and (max-360px){body,input,select{font-size:38%}}
    @media screen and (min-360px){body,input,select{font-size:15.75px}}
    @media screen and (min-400px){body,input,select{font-size:17.5px}}
    @media screen and (min-480px){body,input,select{font-size:21px}}
    @media screen and (min-560px){body,input,select{font-size:24.5px}}
    @media screen and (min-600px){body,input,select{font-size:26.25px}}
    @media screen and (min-640px){body,input,select{font-size:62.5%}}

     HTML头部引用实现自适应屏幕:

    <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0, user-scalable=no" />

    CSS头部引用实现判断屏幕自适应

    最终更新后(推荐)

    body{font-family:"微软雅黑";color:#000;font-size:62.5%;margin:0 auto; }
    @media screen and (min-480px) and (max-639px){body{font-size:50%;}}
    @media screen and (max-479px){body{font-size:40%;}}

    一下个人理解:

    max-width{宽度的最大值==小于当前宽度}

    min-width{宽度的最小值==大于当前宽度}

  • 相关阅读:
    es6的解构赋值
    防抖
    resources saver 实现资源批量下载
    flutter了解
    export, export default 和 import的使用
    5,vue过滤和高阶函数
    4,v-for循环
    3,v-if的使用
    2,v-on绑定事件和修饰符
    怎样统一管理vue项目中的大量api和异步操作
  • 原文地址:https://www.cnblogs.com/dream-w/p/4527141.html
Copyright © 2020-2023  润新知