返回列表 回复 发帖

[技巧心得] 移动端适配小记

  1. $browser-default-font-size:88.8889;

  2. @function j($px) {
  3.   @return $px / $browser-default-font-size * 1rem / 2;
  4. }
复制代码
  1. @media only screen and (max-width:300px) {
  2.   html {
  3.     font-size:83.3333px;
  4.   }

  5. }

  6. @media only screen and (max-width:310px) and (min-width:300px) {
  7.   html {
  8.     font-size:83.3333px;
  9.   }
  10. }

  11. @media only screen and (max-width:320px) and (min-width:310px) {
  12.   html {
  13.     font-size:86.1111px;
  14.   }
  15. }

  16. @media only screen and (max-width:350px) and (min-width:320px) {
  17.   html {
  18.     font-size:88.8889px;
  19.   }
  20. }

  21. @media only screen and (max-width:374px) and (min-width:350px) {
  22.   html {
  23.     font-size:97.2222px;
  24.   }
  25. }

  26. @media only screen and (max-width:413px) and (min-width:375px) {
  27.   html {
  28.     font-size:104.1666px;
  29.   }
  30. }

  31. @media only screen and (max-width:430px) and (min-width:414px) {
  32.   html {
  33.     font-size:115px;
  34.   }
  35. }

  36. @media only screen and (max-width:470px) and (min-width:430px) {
  37.   html {
  38.     font-size:119.4444px;
  39.   }
  40. }

  41. @media only screen and (max-width:480px) and (min-width:470px) {
  42.   html {
  43.     font-size:130.5556px;
  44.   }
  45. }

  46. @media only screen and (max-width:540px) and (min-width:480px) {
  47.   html {
  48.     font-size:133.3333px;
  49.   }
  50. }

  51. @media only screen and (max-width:560px) and (min-width:540px) {
  52.   html {
  53.     font-size:110px;
  54.   }
  55. }

  56. @media only screen and (max-width:570px) and (min-width:560px) {
  57.   html {
  58.     font-size:155.5556px;
  59.   }
  60. }

  61. @media only screen and (max-width:630px) and (min-width:570px) {
  62.   html {
  63.     font-size:158.3333px;
  64.   }
  65. }

  66. @media only screen and (max-width:640px) and (min-width:630px) {
  67.   html {
  68.     font-size:175px;
  69.   }
  70. }

  71. @media only screen and (max-width:710px) and (min-width:640px) {
  72.   html {
  73.     font-size:177.7778px;
  74.   }
  75. }

  76. @media only screen and (max-width:720px) and (min-width:710px) {
  77.   html {
  78.     font-size:197.2222px;
  79.   }
  80. }

  81. @media only screen and (min-width:720px) {
  82.   html {
  83.     font-size:200px;
  84.   }
  85. }
复制代码
reset
  1. @charset "utf-8";

  2. html,body,header,main,nav,footer,article,section,div,p,h1,h2,h3,h4,h5,ul,ol,li,dl,dt,dd,input{margin:0;padding:0;}
  3. html{-webkit-font-smoothing:antialiased}
  4. ul,ol{list-style:none}
  5. a{text-decoration:none;}
  6. img{vertical-align:top;border:0 none;}
  7. em,i{font-style:normal;}
  8. input{outline:none}
  9. input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;}//解决在chrome中自动完成表单后input出现黄色背景
  10. button,input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance: none;}

  11. html {
  12.     font-size:20px; /* 10/16=62.5%  20/16=125% */
  13. }
  14. @media only screen and (min-width:360px) {
  15.     html {
  16.         font-size: 140.625% !important /* 360/2.56=140.625 */
  17.     }
  18. }
  19. @media only screen and (min-width:375px) {
  20.     html {
  21.         font-size: 146.484375% !important
  22.     }
  23. }
  24. @media only screen and (min-width:414px) {
  25.     html {
  26.         font-size: 161.71875% !important
  27.     }
  28. }
  29. @media only screen and (min-width:480px) {
  30.     html {
  31.         font-size: 187.5% !important
  32.     }
  33. }
  34. @media only screen and (min-width:568px) {
  35.     html {
  36.         font-size: 221.875% !important
  37.     }
  38. }
  39. @media only screen and (min-width:640px) {
  40.     html {
  41.         font-size: 250% !important
  42.     }
  43. }
  44. @media only screen and (min-width:667px) {
  45.     html {
  46.         font-size: 260.546875% !important
  47.     }
  48. }
  49. @media only screen and (min-width:720px) {
  50.     html {
  51.         font-size: 281.25% !important
  52.     }
  53. }
  54. @media only screen and (min-width:736px) {
  55.     html {
  56.         font-size: 287.5% !important
  57.     }
  58. }
  59. @media only screen and (min-width:768px) {
  60.     html {
  61.         font-size: 300% !important
  62.     }
  63. }
  64. @media only screen and (min-width:1024px) {
  65.     html {
  66.         font-size: 400% !important
  67.     }
  68. }
  69. @media only screen and (min-width:1080px) {
  70.     html {
  71.         font-size: 421.875% !important
  72.     }
  73. }
  74. @media only screen and (min-width:1280px) {
  75.     html {
  76.         font-size: 500% !important
  77.     }
  78. }
  79. @media only screen and (min-width:1366px) {
  80.     html {
  81.         font-size: 533.59375% !important
  82.     }
  83. }
  84. @media only screen and (min-width:1440px) {
  85.     html {
  86.         font-size: 562.5% !important
  87.     }
  88. }
  89. @media only screen and (min-width:1920px) {
  90.     html {
  91.         font-size: 750% !important
  92.     }
  93. }
  94. @media only screen and (min-width:2560px) {
  95.     html {
  96.         font-size: 1000% !important
  97.     }
  98. }
复制代码
define
  1. @charset "utf-8";

  2. //$browser-default-font-size:40;//html根字号20px & 设计图640px

  3. $browser-default-font-size:80;//html根字号20px & 设计图1280px

  4. @function j($px){
  5.     @return $px / $browser-default-font-size * 1rem;
  6. }


  7. %oh{overflow:hidden;}
  8. %of{@extend %oh;}
  9. %oa{overflow:auto;}
  10. %oya{overflow-y:auto;}

  11. %dn{display:none;}
  12. %db{display:block;}
  13. %di{display:inline;}
  14. %dib{display:inline-block;}
  15. %dt{display:table;}
  16. %dtr{display:table-row;}
  17. %dtc{display:table-cell;}

  18. %fn{float:none;}
  19. %fl{float:left;}
  20. %fr{float:right;}

  21. %ps{position:static;}
  22. %pf{position:fixed;}
  23. %pr{position:relative;}
  24. %pa{position:absolute;}

  25. %ma{margin:0 auto;}

  26. %content{content:'\200B';}
  27. %clearfix:after{
  28.     content:'\200B';//\200B为Unicode字符里的零宽度空格,即 U+200B
  29.     display:block;
  30.     height:0;
  31.     clear:both;
  32. }


  33. %f0{font-size:0;line-height:0;}
  34. %fnone{line-height:9999px;@extend %oh;}
  35. %txtnone{text-indent:-999em;@extend %oh;}

  36. %fsn{font-style:normal;}
  37. %fsi{font-style:italic;}

  38. %fwn{font-weight:normal;}
  39. %fwb{font-weight:bold;}

  40. //英文字体和数字字体可使用Helvetica,ios/android/winphone三种系统都支持
  41. %ffh{font-family:Helvetica;}


  42. %tal{text-align:left;}
  43. %tac{text-align:center;}
  44. %tar{text-align:right;}
  45. %taj{text-align:justify;}

  46. %vat{vertical-align:top;}
  47. %vam{vertical-align:middle;}
  48. %vab{vertical-align:bottom;}
  49. %vatt{vertical-align:text-top;}
  50. %vatb{vertical-align:text-bottom;}
  51. %vabl{vertical-align:baseline;}

  52. %tdu{text-decoration:underline;}
  53. %tdn{text-decoration:none;}

  54. %nowrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
  55. %breakall{word-break:break-all;}


  56. %c0{color:#000;}
  57. %c3{color:#333;}
  58. %c6{color:#666;}
  59. %c9{color:#999;}
  60. %cc{color:#ccc;}
  61. %cfff{color:#fff;}

  62. %bgw{background-color:#fff;}//white
  63. %bgb{background-color:#000;}//black
  64. %bgt{background-color:transparent;}

  65. %bdn{border:0 none;}


  66. //禁用长按选中文本功能
  67. %usn{
  68. -webkit-touch-callout: none;
  69. -webkit-user-select: none;
  70.         user-select: none;
  71. }

  72. //内部边框
  73. %borderbox {
  74. -webkit-box-sizing: border-box;
  75.         box-sizing: border-box;
  76. }
复制代码
返回列表