lib-flexible移动端适配方案

时间 2021-01-14 标签移动适配 rem px2rem
     <!DOCTYPE html> 
   
     < 
    html 
    lang= 
    "en"> 
   
     < 
    head> 
   
     < 
    meta 
    charset= 
    "utf-8"> 
   
     < 
    meta 
    content= 
    "yes" 
    name= 
    "apple-mobile-web-app-capable"> 
   
     < 
    meta 
    content= 
    "yes" 
    name= 
    "apple-touch-fullscreen"> 
   
     < 
    meta 
    content= 
    "telephone=no,email=no" 
    name= 
    "format-detection"> 
   
     < 
    script 
    src= 
    "http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></ 
    script> 
   
     < 
    link 
    rel= 
    "apple-touch-icon" 
    href= 
    "favicon.png"> 
   
     < 
    link 
    rel= 
    "Shortcut Icon" 
    href= 
    "favicon.png" 
    type= 
    "image/x-icon"> 
   
     < 
    title>lib-flexible适配案例</ 
    title> 
   
     < 
    style> 
   
    div { 
   
    width: 
    1 
    rem; 
   
    height: 
    0.4 
    rem; 
   
    font-size: 
    12 
    px; 
    /* 默认写上dpr为1的fontSize*/ 
   
     } 
   
     [ 
    data-dpr 
    = 
    "2"] 
    div { 
   
    font-size: 
    24 
    px; 
   
     } 
   
     [ 
    data-dpr 
    = 
    "3"] 
    div { 
   
    font-size: 
    36 
    px; 
   
     } 
   
    .box{ 
   
    width: 
    1 
    rem; 
   
    height: 
    1.333333333 
    rem 
   
     } 
   
     </ 
    style> 
   
     </ 
    head> 
   
     < 
    body> 
   
     < 
    div 
    class= 
    "box"></ 
    div> 
   
    <!-- 
   
    核心是通过rem来替代px单位。从而实现多分辨率适配! 
   
    本案例需要结合一个文本和一个插件来快速开发实现，vscode 以及 插件px2rem 
   
    页面模版ok！ 
   
    download https://github.com/Maroon1/px2rem   
   
    下载完了直接手动安装 安装好了还需要配置一下 
   
    vscode有一个全局配置json 加上 "px2rem.htmlFontSize": 75 标识以75px作为基准转化 
   
    然后在css数值上单击 alt+c 即可实现转化 当然也可以按住alt多选 
   
    --> 
   
     </ 
    body> 
   
     </ 
    html>