common.less 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // 设置常见的屏幕尺寸,修改里面的HTML文字大小
  2. html {
  3. font-size: 50px;
  4. }
  5. // 我们此次定义的划分的份数为15
  6. @no: 15;
  7. // 320
  8. @media screen and (min-width: 320px) {
  9. html {
  10. font-size: 320px / @no;
  11. }
  12. }
  13. // 360
  14. @media screen and (min-width: 360px) {
  15. html {
  16. font-size: 360px / @no;
  17. }
  18. }
  19. // 375 iphone 678
  20. @media screen and (min-width: 375px) {
  21. html {
  22. font-size: 375px / @no;
  23. }
  24. }
  25. // 384
  26. @media screen and (min-width: 384px) {
  27. html {
  28. font-size: 384px / @no;
  29. }
  30. }
  31. // 400
  32. @media screen and (min-width: 400px) {
  33. html {
  34. font-size: 400px / @no;
  35. }
  36. }
  37. // 414
  38. @media screen and (min-width: 414px) {
  39. html {
  40. font-size: 414px / @no;
  41. }
  42. }
  43. // 424
  44. @media screen and (min-width: 424px) {
  45. html {
  46. font-size: 424px / @no;
  47. }
  48. }
  49. // 480
  50. @media screen and (min-width: 480px) {
  51. html {
  52. font-size: 480px / @no;
  53. }
  54. }
  55. // 540
  56. @media screen and (min-width: 540px) {
  57. html {
  58. font-size: 540px / @no;
  59. }
  60. }
  61. // 720
  62. @media screen and (min-width: 720px) {
  63. html {
  64. font-size: 720px / @no;
  65. }
  66. }
  67. // 750
  68. @media screen and (min-width: 750px) {
  69. html {
  70. font-size: 750px / @no;
  71. }
  72. }
  73. a {
  74. text-decoration: none;
  75. }