rem布局： 让每一个盒子根据当前屏幕的宽度计算出一个最新的宽度来，来适应整体的布局；

rem进行屏幕适配

  • rem是css3的新增的单位，并且移动端的支持度很高，Android2.x+，ios5+都支持。
  • rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可
  • 1rem相当于一个HTML的font-size 的属性值；rem是一个相对的单位；如果屏幕的大小发生改变，计算出当前屏幕下最新的html对应的font-size值；


rem响应式布局的思想

  • 一般不要给元素设置具体的宽度，但是一些小图标可以设定具体的宽度
  • 高度值可以设置固定值，设计稿有多大，我们就严格有多大
  • 计算出每个屏幕的的 html字体大小然后通过媒体查询的方式设置或者用JS获取真实的宽度，让其除以设计稿的宽度，算出比例，通过JS动态获取计算 html字体大小并且复制给 html

1.媒体查询的方式

  1. @media (min-width: 320px) {
  2.   html {
  3.     font-size: 21.33333333px;
  4.   }
  5. }
  6. @media (min-width: 360px) {
  7.   html {
  8.     font-size: 24px;
  9.   }
  10. }
  11. @media (min-width: 375px) {
  12.   html {
  13.     font-size: 25px;
  14.   }
  15. }
  16. @media (min-width: 384px) {
  17.   html {
  18.     font-size: 25.6px; 
  19.   }
  20. }
  21. @media (min-width: 400px) {
  22.   html {
  23.     font-size: 26.66666667px;
  24.   }
  25. }
  26. @media (min-width: 414px) {
  27.   html {
  28.     font-size: 27.6px;
  29.   }
  30. }
  31. @media (min-width: 424px) {
  32.   html {
  33.     font-size: 28.26666667px;
  34.   }
  35. }
  36. @media (min-width: 480px) {
  37.   html {
  38.     font-size: 32px;
  39.   }
  40. }
  41. @media (min-width: 540px) {
  42.   html {
  43.     font-size: 36px;
  44.   }
  45. }
  46. @media (min-width: 720px) {
  47.   html {
  48.     font-size: 48px;
  49.   }
  50. }
  51. @media (min-width: 750px) {
  52.   html {
  53.     font-size: 50px;
  54.   }
  55. }
  1. 通过js改变
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
      (function(){
         function reset(){
              // window的resize： 当可视窗口发生改变时，触发的回调；
              let winW = document.documentElement.clientWidth;
              document.documentElement.style.fontSize=winW*100/750+"px";
          }
          window.addEventListener("resize",reset);
          // 屏幕的比例=rem的比例；
          reset();
      })()
    </script>

小结

在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css的样式和js代码有一定的耦合性，并且必须将改变font-size的代码放在css样式之前