新航路师徒学院

 找回密码
 立即注册
搜索
查看: 759|回复: 2

REM 多版本(考虑谷哥只支持12号字体)默认样式进行调整

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-12-8 16:23:45 | 显示全部楼层 |阅读模式
  1. $yh:"微软雅黑","Microsoft yahei";
  2. @function pxToRem($px, $base: 24) {
  3.   @return ($px / $base) * 1rem;
  4. }
  5. html {
  6.    font-size: 62.5%; font-family:$yh;
  7. }
  8. body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {
  9.     margin:0; padding:0;
  10. }
  11. body{
  12.     background: #f5f4f0;
  13.     -webkit-tap-highlight-color:transparent;
  14. }

  15. ol,ul,textarea,input,option,th,td {
  16.     padding:0;
  17. }

  18. .page{
  19.     min-width: 320px;max-width: 750px;margin: 0 auto;
  20. }
  21. h1,h2,h3,h4,h5,h6 {
  22.     font-weight: normal;
  23.     font-size:100%;
  24. }
  25. article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  26.     display: block;
  27. }
  28. table {
  29.     border-collapse:collapse;border-spacing: 0;
  30. }
  31. ul,ol {
  32.     list-style-type:none;
  33. }
  34. .clearfix:after {
  35.     content:'.';display:block;height:0;clear:both;visibility:hidden;
  36. }
  37. //.clearfix {*zoom:1;}
  38. .clear {
  39.     clear:both;height:0;overflow:hidden;
  40. }
  41. /* ios默认文本框阴影 */
  42. input[type=text],textarea{
  43.     -webkit-appearance:none;
  44. }
  45. /* 低版本安卓文本框层级问题 */
  46. input:focus{
  47.     -webkit-user-modify:read-write-plaintext-only;
  48. }
  49. fieldset, img {
  50.     border: 0;
  51. }
  52. a {
  53.     text-decoration:none;
  54. }
  55. a,textarea,input{
  56.     outline:none;
  57. }
  58. blockquote, q {
  59.     quotes: none;
  60. }
  61. blockquote:before, blockquote:after, q:before, q:after {
  62.   content: '';
  63.   content: none;
  64. }
  65. textarea {
  66.     overflow:auto;resize:none;
  67. }
  68. // 以下是按照320下12像素字号走的,因为谷歌不识别小于12号字号
  69. @media only screen and (min-width: 320px){
  70.     html {
  71.         font-size: 75%!important; /* 12÷16=73.4% */
  72.     }
  73. }
  74. @media only screen and (min-width: 375px){
  75.     html {
  76.         font-size: 87.890625%!important; /* 14.0625÷16=73.2% */
  77.     }
  78. }
  79. @media only screen and (min-width: 414px){
  80.     html {
  81.         font-size: 97.03%!important; /* 15.525÷16=94% */
  82.     }
  83. }
  84. @media only screen and (min-width: 480px){
  85.     html {
  86.         font-size: 112.5%!important; /* 18÷16=94% */
  87.     }
  88. }
  89. @media only screen and (min-width: 560px){
  90.     html {
  91.         font-size: 131.25%!important;/* 21÷16=109% */
  92.     }
  93. }
  94. @media only screen and (min-width: 640px){
  95.     html {
  96.         font-size: 150%!important; /* 24÷16=125% */
  97.     }
  98. }
  99. @media only screen and (min-width: 720px){
  100.     html {
  101.         font-size: 168.75%!important; /* 27÷16=146.43% */
  102.     }
  103. }
  104. @media only screen and (min-width: 750px){
  105.     html {
  106.         font-size: 175.78125%!important; /* 28.125÷16=146.43% */
  107.     }
  108. }
  109. @media only screen and (min-width: 800px){
  110.     html {
  111.         font-size: 187.5%!important; /* 30÷16=146.43% */
  112.     }
  113. }
  114. @media only screen and (min-width: 960px){
  115.     html {
  116.         font-size: 225%!important; /* 36÷16=146.43% */
  117.     }
  118. }
复制代码


回复

使用道具 举报

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
 楼主| 发表于 2016-12-8 16:24:17 | 显示全部楼层
  1. /**
  2. * @author 象天
  3. * 2015-09-07
  4. * px转em
  5. * 使用:pxToRem(110)
  6. 没考虑谷哥浏览器
  7. *
  8. **/
  9. @function pxToRem($px, $base: 20) {
  10.   @return ($px / $base) * 1rem;
  11. }
  12. body {
  13.   font-family: "SimHei","Helvetica Neue",Arial,"Droid Sans", sans-serif;
  14. }
  15. html {
  16.     font-size: 62.5%; /* 10÷16=62.5% */
  17. }
  18. body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {
  19.     margin:0;
  20. }
  21. ol,ul,textarea,input,option,th,td {
  22.     padding:0;
  23. }
  24. .page {
  25.     min-width: 320px;max-width: 750px;margin: 0 auto;
  26. }
  27. h1,h2,h3,h4,h5,h6 {
  28.     font-size:100%;
  29. }
  30. article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  31.     display: block;
  32. }
  33. table {
  34.     border-collapse:collapse;border-spacing: 0;
  35. }
  36. ul,ol {
  37.     list-style-type:none;
  38. }
  39. .clearfix:after {
  40.     content:'.';display:block;height:0;clear:both;visibility:hidden;
  41. }
  42. //.clearfix {*zoom:1;}
  43. .clear {
  44.     clear:both;height:0;overflow:hidden;
  45. }
  46. /* ios默认文本框阴影 */
  47. input[type=text],textarea{
  48.     -webkit-appearance:none;
  49. }
  50. /* 低版本安卓文本框层级问题 */
  51. input:focus{
  52.     -webkit-user-modify:read-write-plaintext-only;
  53. }
  54. fieldset, img {
  55.     border: 0;
  56. }
  57. a {
  58.     text-decoration:none;
  59. }
  60. a,textarea,input{
  61.     outline:none;
  62. }
  63. blockquote, q {
  64.     quotes: none;
  65. }
  66. blockquote:before, blockquote:after, q:before, q:after {
  67.   content: '';
  68.   content: none;
  69. }
  70. textarea {
  71.     overflow:auto;resize:none;
  72. }
  73. @media only screen and (min-width: 375px){
  74.     html {
  75.         font-size: 73.4%!important; /* 11.75÷16=73.4% */
  76.     }
  77. }
  78. @media only screen and (min-width: 480px){
  79.     html {
  80.         font-size: 94%!important; /* 15.04÷16=94% */
  81.     }
  82. }
  83. @media only screen and (min-width: 560px){
  84.     html {
  85.         font-size: 109%!important;/* 17.44÷16=109% */
  86.     }
  87. }
  88. @media only screen and (min-width: 640px){
  89.     html {
  90.         font-size: 125%!important; /* 20÷16=125% */
  91.     }
  92. }
  93. @media only screen and (min-width: 750px){
  94.     html {
  95.         font-size: 146.43%!important; /* 24.43÷16=146.43% */
  96.     }
  97. }
复制代码
回复 支持 反对

使用道具 举报

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
 楼主| 发表于 2016-12-12 12:34:31 | 显示全部楼层
任意浏览器的默认字体高都是16px.
所有未经调整的浏览器都符合:1em=16px;
那么12px = 0.75em, 10px = 0.625em;
body选择器中声明font-size=62.5%;
这样12px =1.2 em 10px = 1em
1:10
以640 开发 进行调整
    62.5%   10px;
    640 150%    24px;
    320除以标准比例 640  再乘以 640的基数24  再除以  HTML 根据基数16
    320/640  * 24 / 16 = 75%;
    375/640  * 24 / 16 = 87.89%;
    414/640  * 24 / 16 = 97.03%
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-7-18 16:19 , Processed in 0.135873 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表