前端适配

rem

  • rem是一个单位，比如一个html的font-size是14px，html里面的所有元素的样式使用rem来代替px，则1rem=14px,比如某个div大小为10rem=140px
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         html {
  11.             font-size: 14px;
  12.         }
  14.         div {
  15.             height: 10rem;
  16.             width: 10rem;
  17.             background: blue;
  18.         }
  20.         span {
  21.             display: block;
  22.             height: 20rem;
  23.             width: 20rem;
  24.             background-color: rgb(122, 193, 193);
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <div>
  31.     </div>
  32.     <span>
  33.     </span>
  34. </body>
  36. </html>

@media 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 我们在屏幕上，并且最大宽度是800px 设置我们想要的样式
  11.         max-width 小于等于800px
  12.         媒体查询可以根据不同的屏幕尺寸改变不同的样式
  13.          */
  14.         @media screen and (max-width: 800px) {
  15.             body {
  16.                 background-color: pink;
  17.             }
  18.         }
  20.         /* 当屏幕宽度小于等于500px时使用这个样式 */
  21.         @media screen and (max-width:500px) {
  22.             body {
  23.                 background-color: yellow;
  24.             }
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  31. </body>
  33. </html>

媒体查询案例1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 当屏幕宽度小于等于550px时，背景颜色为蓝色 */
  10.         @media screen and (max-width: 550px) {
  11.             body{
  12.                 background-color: blue;
  13.             }
  14.         }
  15.         /* 当屏幕宽度大于等于556px小于等于779px时背景颜色为绿色 */
  16.         /* @media screen and (min-width: 556px) and (max-width:779px) {
  17.             body{
  18.                 background-color: green;
  19.             }
  20.         } */
  21.         /* 下面这种写法也是可行的，推荐使用下面这种写法
  22.         比如现在屏幕宽度大于等于556px还没有达到800px则使用下面背景绿色这个样式
  23.         当屏幕宽度大于等于800px时使用的是大于等于800px背景红色的样式
  24.         也就是后面的样式与前面样式有冲突会覆盖前面的样式 */
  25.         @media screen and (min-width: 556px) {
  26.             body{
  27.                 background-color: green;
  28.             }
  29.         }
  30.         /* 当屏幕宽度大于等于800px时，背景颜色为红色 */
  31.         @media screen and (min-width: 800px) {
  32.             body{
  33.                 background-color: red;
  34.             }
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  40. </body>
  41. </html>

媒体查询案例2

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         /* 当屏幕宽度位于550px~749px,html的font-size为100px */
  16.         @media screen and (min-width: 550px) {
  17.             html {
  18.                 font-size: 100px;
  19.             }
  20.         }
  22.         /* 当屏幕宽度大于等于750px,html的font-size为200px */
  23.         @media screen and (min-width: 750px) {
  24.             html {
  25.                 font-size: 200px;
  26.             }
  27.         }
  29.         .car {
  30.             height: 1rem;
  31.             font-size: .5rem;
  32.             background-color: green;
  33.             line-height: 1rem;
  34.             color: white;
  35.             text-align: center;
  36.         }
  37.     </style>
  38. </head>
  40. <body>
  41.     <div class="car">购物车</div>
  42. </body>
  44. </html>

Less基础

Less介绍

Less(Leaner Style Sheets) 是一门css扩展语言，也称为css预处理器，在css现有的语法上加入了程序式语言特性

Less中文网址：http://lesscss.cn

常见的css预处理器：Sass、Less、Stylus

Less编译

vscodr Less插件-Easy Less，安装完成之后只要保存以下less文件，会自动编译生成css文件
1657188967274.png
1657188986632.png
1657189005903.png

Less嵌套

  • css写法
  1. div {
  2.   height: 100px;
  3. }
  4. div a {
  5.   color: red;
  6. }
  7. div a:hover {
  8.   background-color: green;
  9. }
  10. .parent {
  11.   background-color: blue;
  12. }
  13. .parent .children {
  14.   background-color: pink;
  15. }
  • less写法
  1. div {
  2.     height: 100px;
  4.     a {
  5.         color: red;
  6.         // 伪类需要在前面加上&
  7.         &:hover {
  8.             background-color: green;
  9.         }
  10.     }
  12. }
  13. .parent{
  14.     background-color: blue;
  15.     .children{
  16.         background-color: pink;
  17.     }
  18. }

Less运算

  • less代码
  1. @fontSize: 14px;
  3. html {
  4.     font-size: @fontSize;
  5. }
  7. div {
  8.     height: 250px + 10;
  9.     background-color: red;
  10. }
  12. .container {
  13.     span {
  14.         height: (80rem / @fontSize);
  15.     }
  16. }
  18. // 运算符两边要有空格，新版本除法运算要加括号
  19. // 如果两个数值运算只有一个数值有单位，运算结果的单位就是这个单位
  20. // 如果参与运算的两个数值都有单位，运算结果的单位为第一个数值的单位，比如10rem / 5px = 2rem
  • 编译后的css代码
  1. html {
  2.   font-size: 14px;
  3. }
  4. div {
  5.   height: 260px;
  6.   background-color: red;
  7. }
  8. .container span {
  9.   height: 5.71428571rem;
  10. }

如何进行适配

  • 利用vscode开发，安装px to rem插件将px单位转换成为rem,安装完成之后，点击该插件的设置按钮，选择扩展设置，将Root Font Size 设置为你设计稿的字体大小
  • 编写测试类，注意：如果使用媒体查询使用的是min-width，要从小到大来写，要不然不会起到你意料之中的适配效果
  • 如下是测试代码 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./less/example.css">
  10.     <style>
  11.         /* 假如我根据的设计稿是1920*1080大小的，将宽度划分10等份，那么html的font-size=1920/10=192px，
  12.         在开发的过程中就以192px为基准，为了适应其他的屏幕大小，需要在媒体查询中为每个屏幕大小设置其html 的font-size大小，
  13.         为（屏幕宽度/10px） */
  15.         /* 如果屏幕大小为500*360，那么1rem=500/10=50px */
  16.         @media screen and (min-width:500px) {
  17.             html {
  18.                 font-size: 50px;
  19.             }
  20.         }
  22.         /* 如果屏幕大小为640*360，那么1rem=640/10=64px */
  23.         @media screen and (min-width:640px) {
  24.             html {
  25.                 font-size: 64px;
  26.             }
  27.         }
  29.         /* 如果屏幕大小为740*360，那么1rem=740/10=74px */
  30.         @media screen and (min-width:740px) {
  31.             html {
  32.                 font-size: 74px;
  33.             }
  34.         }
  36.         /* 如果屏幕大小为915*412，那么1rem=915/10=91.5px */
  37.         @media screen and (min-width:915px) {
  38.             html {
  39.                 font-size: 91.5px;
  40.             }
  41.         }
  43.         /* 如果屏幕大小为1024*768，那么1rem=1024/10=102.4px */
  44.         @media screen and (min-width:1024px) {
  45.             html {
  46.                 font-size: 102.4px;
  47.             }
  48.         }
  50.         /* 如果屏幕大小为1300*500的，划分10等份，那么1rem=1300/10=130px */
  51.         @media screen and (min-width: 1300px) {
  52.             html {
  53.                 font-size: 130px;
  54.             }
  55.         }
  57.         /* 如果屏幕大小是1400*1080的，划分10等份，那么1rem=1400/10=140px */
  58.         @media screen and (min-width: 1400px) {
  59.             html {
  60.                 font-size: 140px;
  61.             }
  62.         }
  64.         /* 如果屏幕大小是1500*1080的，划分10等份，那么1rem=1500/10=150px */
  65.         @media screen and (min-width: 1500px) {
  66.             html {
  67.                 font-size: 150px;
  68.             }
  69.         }
  71.         /* 如果屏幕大小是1920*1080的，划分10等份，那么1rem=1920/10=192px */
  72.         @media screen and (min-width: 1920px) {
  73.             html {
  74.                 font-size: 192px;
  75.             }
  76.         }
  77.     </style>
  78. </head>
  80. <body>
  81.     <div class="header">
  82.         <span>头部</span>
  83.         <span>头部</span>
  84.         <span>头部</span>
  85.         <span>头部</span>
  86.     </div>
  88.     <div class="content">
  89.         内容
  90.     </div>
  93. </body>
  95. </html>
  1. .header {
  2.   border: 0.0052rem solid red;
  3.   height: 1.0417rem;
  4.   width: 8.8542rem;
  5.   display: flex;
  6.   margin: auto;
  7.   justify-content: center;
  8.   align-items: center;
  9.   margin-bottom: 0.1042rem;
  10. }
  11. .header span {
  12.   background-color: blue;
  13.   color: white;
  14.   height: 0.5208rem;
  15.   text-align: center;
  16.   line-height: 0.5208rem;
  17.   margin: 0 0.1042rem;
  18.   width: 1.5625rem;
  19.   font-size: 0.2604rem;
  20. }
  21. .content {
  22.   width: 8.8542rem;
  23.   height: 2.6042rem;
  24.   text-align: center;
  25.   line-height: 2.6042rem;
  26.   background-color: pink;
  27.   margin: auto;
  28. }
  2. .header {
  3.     border: .0052rem solid red;
  4.     height: 1.0417rem;
  5.     width: 8.8542rem;
  6.     display: flex;
  7.     margin: auto;
  8.     justify-content: center;
  9.     align-items: center;
  10.     margin-bottom: .1042rem;
  12.     span {
  13.         background-color: blue;
  14.         color: white;
  15.         height: .5208rem;
  16.         text-align: center;
  17.         line-height: .5208rem;
  18.         margin: 0 .1042rem;
  19.         width: 1.5625rem;
  20.         font-size: .2604rem;
  21.     }
  22. }
  24. .content {
  25.     width: 8.8542rem;
  26.     height: 2.6042rem;
  27.     text-align: center;
  28.     line-height: 2.6042rem;
  29.     background-color: pink;
  30.     margin: auto;
  31. }