zoukankan      html  css  js  c++  java
  • 移动端适配rem&&媒体查询

    第一种:根元素为100px,再按照750设计稿转化成vw单位,这样只要按照设计稿的单位/2即可。如果是小程序,不需要除以2。

    html{
        font-size: 26.66vw;  //移动端适配 这里使用rem+vw方案 省去媒体查询  
    }
    

    第二种:媒体查询 按照750设计稿,根元素是100px,兼容性比较好。

    html {
        font-size: 625%;  /*100 ÷ 16 × 100% = 625%*/
    }
    @media screen and (device- 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
        html {  }
    }
    @media screen and (min-360px) and (max-374px) and (orientation:portrait) {
        html { font-size: 703%; }
    }
    @media screen and (min-375px) and (max-383px) and (orientation:portrait) {
        html { font-size: 732.4%; }
    }
    @media screen and (min-384px) and (max-399px) and (orientation:portrait) {
        html { font-size: 750%; }
    }
    @media screen and (min-400px) and (max-413px) and (orientation:portrait) {
        html { font-size: 781.25%; }
    }
    @media screen and (min-414px) and (max-431px) and (orientation:portrait){
        html { font-size: 808.6%; }
    }
    @media screen and (min-432px) and (max-479px) and (orientation:portrait){
        html { font-size: 843.75%; }
    }
    
  • 相关阅读:
    QQ群友在线/离线,如何测试?
    QQ好友在线/离线,怎么测试?
    用户体验测试一样很重要
    BUG,带给我的思考
    chrome DevTools
    HTTP、HTTPS
    Knockout双向绑定
    微信小程序
    git fetch 更新远程代码到本地仓库
    Git 同步远程仓库
  • 原文地址:https://www.cnblogs.com/linxue/p/9488668.html
Copyright © 2011-2022 走看看