新航路师徒学院

 找回密码
 立即注册
搜索
查看: 437|回复: 3

【新航路】使用REM无忧切图

[复制链接]

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
发表于 2016-9-4 22:00:34 | 显示全部楼层 |阅读模式
有好多人喜欢用bootstrap 来做网站。
这个更倾向与系统网站开发。
敢问有几个正八经的前端开发,在写公司网站前台网站的时候使用这东东。
没有吧。
不过我想好多人都看过他的源码。
源码真的可以看看。

后来REM 出来了,有不少人使用这个东东来开发跨平台网页。
这真的是神器呀。

使用了他,切图和pc  上真没有不一样。

下面贴上css 代码  不过是sass 语法的 。。


  1. /**
  2. * @author 象天
  3. * 2015-09-07
  4. * ##375来开发,实现耍耍 375*3 1125px
  5. * ##375   3倍 就是 30px
  6. * px转em
  7. * 使用:pxToRem(110)
  8. *
  9. **/
  10. @function pxToRem($px, $base: 30) {
  11.   @return ($px / $base) * 1rem;
  12. }
  13. html {
  14.     font-size: 62.5%; /* 10÷16=62.5% */
  15. }
  16. body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {
  17.     margin:0;
  18. }
  19. ol,ul,textarea,input,option,th,td {
  20.     padding:0;
  21. }
  22. .page {
  23.     min-width: 320px;max-width: 750px;margin: 0 auto;
  24. }
  25. h1,h2,h3,h4,h5,h6 {
  26.     font-size:100%;
  27. }
  28. article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  29.     display: block;
  30. }
  31. table {
  32.     border-collapse:collapse;border-spacing: 0;
  33. }
  34. ul,ol {
  35.     list-style-type:none;
  36. }
  37. .clearfix:after {
  38.     content:'.';display:block;height:0;clear:both;visibility:hidden;
  39. }
  40. //.clearfix {*zoom:1;}
  41. .clear {
  42.     clear:both;height:0;overflow:hidden;
  43. }
  44. /* ios默认文本框阴影 */
  45. input[type=text],textarea{
  46.     -webkit-appearance:none;
  47. }
  48. /* 低版本安卓文本框层级问题 */
  49. input:focus{
  50.     -webkit-user-modify:read-write-plaintext-only;
  51. }
  52. fieldset, img {
  53.     border: 0;
  54. }
  55. a {
  56.     text-decoration:none;
  57. }
  58. a,textarea,input{
  59.     outline:none;
  60. }
  61. blockquote, q {
  62.     quotes: none;
  63. }
  64. blockquote:before, blockquote:after, q:before, q:after {
  65.   content: '';
  66.   content: none;
  67. }
  68. textarea {
  69.     overflow:auto;resize:none;
  70. }
  71. //@media only screen and (min-width: 481px){
  72. //    html {
  73. //        font-size: 94%!important; /* 15.04÷16=94% */
  74. //    }
  75. //}
  76. //@media only screen and (min-width: 561px){
  77. //    html {
  78. //        font-size: 109%!important;/* 17.44÷16=109% */
  79. //    }
  80. //}
  81. //@media only screen and (min-width: 641px){
  82. //    html {
  83. //        font-size: 125%!important; /* 20÷16=125% */
  84. //    }
  85. //}
  86. /**
  87.   如果按375 开发  如下 比例,  效果图为  750的1.5倍  375 的三倍
  88.   1、
  89.     375*3 = 1125
  90.     62.5%*3 = 187.5%
  91.     187.5%*16 30
  92.   2、
  93.     750/375   *   30  /  16  =375%      60.00÷16 = 375%
  94.     比例      乘以  基数  30  除以  16根数  等于375%
  95.     750/375   *  62.5% *  3  =375%
  96.     比例      乘以  基数62.5%  再乘以3倍  等于  375%
  97. **/
  98. @media only screen and (min-width: 321px){
  99.     html {
  100.         font-size: 161%!important; /* 25.61÷16=161% */
  101.     }
  102. }
  103. @media only screen and (min-width: 376px){
  104.     html {
  105.         font-size: 187.5%!important; /* 30.00÷16=187.5% */
  106.     }
  107. }
  108. @media only screen and (min-width: 415px){
  109.     html {
  110.         font-size: 207%!important; /* 33.12÷16=207% */
  111.     }
  112. }
  113. @media only screen and (min-width: 481px){
  114.     html {
  115.         font-size: 240%!important; /* 38.4÷16=240% */
  116.     }
  117. }
  118. @media only screen and (min-width: 561px){
  119.     html {
  120.         font-size: 280%!important;/* 44.81÷16=280% */
  121.     }
  122. }
  123. @media only screen and (min-width: 641px){
  124.     html {
  125.         font-size: 320%!important; /* 51.2÷16=320% */
  126.     }
  127. }
  128. @media only screen and (min-width: 751px){
  129.     html {
  130.         font-size: 375%!important; /* 60.00÷16 = 375% */
  131.     }
  132. }
复制代码


回复

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
 楼主| 发表于 2016-9-4 22:02:12 | 显示全部楼层
  1. $yh:"微软雅黑","Microsoft yahei";
  2. @function pxToRem($px, $base: 28.125) {
  3.   @return ($px / $base) * 1rem;
  4. }
  5. html {
  6.    font-size: 75%; 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: #f6f5f0;
  13.     -webkit-tap-highlight-color:transparent;
  14. }
  15. ol,ul,textarea,input,option,th,td {
  16.     padding:0;
  17. }
  18. li{
  19.     list-style: none;
  20. }
  21. #page {
  22.     min-width: 320px;max-width: 750px;margin: 0 auto;
  23. }
  24. h1,h2,h3,h4,h5,h6 {
  25.     font-weight: normal;
  26.     font-size:100%;
  27. }
  28. article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  29.     display: block;
  30. }
  31. table {
  32.     border-collapse:collapse;border-spacing: 0;
  33. }
  34. ul,ol {
  35.     list-style-type:none;
  36. }
  37. .clearfix:after {
  38.     content:'.';display:block;height:0;clear:both;visibility:hidden;
  39. }
  40. //.clearfix {*zoom:1;}
  41. .clear {
  42.     clear:both;height:0;overflow:hidden;
  43. }
  44. /* ios默认文本框阴影 */
  45. input[type=text],textarea{
  46.     -webkit-appearance:none;
  47. }
  48. /* 低版本安卓文本框层级问题 */
  49. input:focus{
  50.     -webkit-user-modify:read-write-plaintext-only;
  51. }
  52. fieldset, img {
  53.     border: 0;
  54. }
  55. a {
  56.     text-decoration:none;
  57. }
  58. a,textarea,input{
  59.     outline:none;
  60. }
  61. blockquote, q {
  62.     quotes: none;
  63. }
  64. blockquote:before, blockquote:after, q:before, q:after {
  65.   content: '';
  66.   content: none;
  67. }
  68. textarea {
  69.     overflow:auto;resize:none;
  70. }
  71. img{
  72.     border:none;
  73. }
  74. // 以下是按照320下12像素字号走的,因为谷歌不识别小于12号字号
  75. @media only screen and (min-width: 320px){
  76.     html {
  77.         font-size: 75%!important; /* 12÷16=73.4% */
  78.     }
  79. }
  80. @media only screen and (min-width: 375px){
  81.     html {
  82.         font-size: 87.890625%!important; /* 14.0625÷16=73.2% */
  83.     }
  84. }
  85. @media only screen and (min-width: 414px){
  86.     html {
  87.         font-size: 97.03%!important; /* 15.525÷16=94% */
  88.     }
  89. }
  90. @media only screen and (min-width: 480px){
  91.     html {
  92.         font-size: 112.5%!important; /* 18÷16=94% */
  93.     }
  94. }
  95. @media only screen and (min-width: 560px){
  96.     html {
  97.         font-size: 131.25%!important;/* 21÷16=109% */
  98.     }
  99. }
  100. @media only screen and (min-width: 640px){
  101.     html {
  102.         font-size: 150%!important; /* 24÷16=125% */
  103.     }
  104. }
  105. @media only screen and (min-width: 720px){
  106.     html {
  107.         font-size: 168.75%!important; /* 27÷16=146.43% */
  108.     }
  109. }
  110. @media only screen and (min-width: 750px){
  111.     html {
  112.         font-size: 175.78125%!important; /* 28.125÷16=146.43% */
  113.     }
  114. }
复制代码
回复 支持 反对

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
 楼主| 发表于 2016-9-4 22:02:37 | 显示全部楼层
个人有个人使用方法,但要理解其原理就可以了
回复 支持 反对

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
 楼主| 发表于 2016-9-4 22:03:19 | 显示全部楼层
  1. <meta name="viewport" content="initial-scale=1,width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no">
复制代码


html 中要有此部分哟
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-5-27 15:45 , Processed in 0.125817 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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