zoukankan      html  css  js  c++  java
  • 移动端的兼容性问题

    ①winPhone的兼容:

    @media all and (-ms-high-contrast: active),(-ms-high-contrast: none){}

    ②android4.0+ ios4+

    @media all and (-webkit-transform-3d){}

    html{font-size:62.5%;/* 10÷16=62.5% 相当于10px */}
    body{font-size: 1.2rem;}
    @media only screen and (min-480px){html{font-size:94%;}}
    @media only screen and (min-560px){html{font-size:109%;}}
    @media only screen and (min-640px){html{font-size:125%;}}
    @media only screen and (min-720px){html{font-size:150%;}}
    @media only screen and (min-800px){html{font-size:175%;}}
    @media only screen and (min-880px){html{font-size:200%;}}
    @media (device-320px){html{font-size: 60%;}}
    @media (device-320px) and (min- 480px){html{font-size: 74%;}}
    @media (device-473px){html{font-size:58%;/* 兼容winPhone 竖向 */}}
    @media (device-320px) and (-webkit-min-device-pixel-ratio:2){html{font-size:56%;}/*兼容iphone4s、5 竖向*/}
    @media (device-320px) and (-webkit-min-device-pixel-ratio:2) and (min- 480px){html{font-size:74%;}/*兼容iphone4s、5 横向*/}
    @media (device-375px) and (-webkit-min-device-pixel-ratio:2){html{font-size:65.5%;/* 兼容iphone6 竖向 */}}
    @media (device-375px) and (-webkit-min-device-pixel-ratio:2) and (min-667px){html{font-size:118%;/* 兼容iphone6 横向 */}}
    @media (device-414px) and (-webkit-min-device-pixel-ratio:3){html{font-size:74%;/* 兼容iphone6 plus 竖向 */}}
    @media (device-414px) and (-webkit-min-device-pixel-ratio:3) and (min-736px){html{font-size:128%;/* 兼容iphone6 plus 横向 */}}
    @media (device-1080px) and (-webkit-min-device-pixel-ratio:3){html{font-size:66%;/* 兼容 三星Galaxy S4 横向 */}}

  • 相关阅读:
    dubbo注册zookeeper保错原因
    Django 终端打印SQL语句
    Django 的orm模型
    Django 的路由系统
    Django 开端
    前端 jq的ajax请求
    前端 后台
    前端 JQ操作
    前端 链式操作
    前端 JQ事件操作
  • 原文地址:https://www.cnblogs.com/shuilinger/p/4174042.html
Copyright © 2011-2022 走看看