zoukankan      html  css  js  c++  java
  • @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{宽度的最小值==大于当前宽度}

  • 相关阅读:
    登录认证,全选,反选
    jQuery基础知识
    jQuery
    js练习
    BOM DOM
    mysql视图
    用CrwalSpider爬取boss直聘
    设置piplines.py数据管道
    在middlewares.py文件里添加代理ip
    爬取豆瓣电影
  • 原文地址:https://www.cnblogs.com/dream-w/p/4527141.html
Copyright © 2011-2022 走看看