69、移动端布局-媒体查询 + rem单位布局

现在HTML5前端不仅仅局限于PC端，HTML5前端还可以实现移动端，实现微信等等，传统的布局单位px，不能是达到自适应的学校过，那么移动端布局有哪些方式呢?

媒体查询 + rem单位布局

说道这个布局，，那么我们首先得了解什么是媒体查询，rem是什么？

媒体查询：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

1.  
   @media all and （条件）{
2.  
    
3.  
        css的语法
4.  
    
5.  
   }

这句代码会自动的获取到设备的视口宽度，来匹配条件

1.  
   @media all and （min-width：500px）{
2.  
    
3.  
        body{
4.  
    
5.  
            background:red;
6.  
    
7.  
        }
8.  
    
9.  
   }
10.  
     
11.  
    @media all and （min-width：700px）{
12.  
     
13.  
         body{
14.  
     
15.  
             background:green;
16.  
     
17.  
         }
18.  
     
19.  
    }
20.  
     
21.  
    @media all and （min-width：900px）{
22.  
     
23.  
         body{
24.  
     
25.  
             background:black;
26.  
     
27.  
         }
28.  
     
29.  
    }

上面的代码表示：

（1）如果视口的最小宽度是500px的时候,则body的背景颜色为red，

（2）如果视口的最小宽度为700px的时候，则body的背景颜色为green，

（3）如果视口的最小宽度为900px的时候，则body的背景颜色为black，

这就是根据媒体查询去获取视口的宽度，来相应的的改变样式，这就是媒体查询，

那么rem是什么呢？

rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。

如果一个页面中html{font-size:16px;},那么1rem = 16px，2rem = 32px;

了解到这两个概念之后，那么他们是怎么配合布局移动端呢？接下来看下面的代码。

1.  
   @media all and （min-width：320px）{
2.  
    
3.  
        html{
4.  
    
5.  
            font-size:12px;
6.  
    
7.  
        }
8.  
    
9.  
   }
10.  
     
11.  
    @media all and （min-width：375px）{
12.  
     
13.  
         body{
14.  
     
15.  
             font-size:14px;
16.  
     
17.  
         }
18.  
     
19.  
    }
20.  
     
21.  
    @media all and （min-width：414px）{
22.  
     
23.  
         body{
24.  
     
25.  
               font-size:16px;
26.  
     
27.  
         }
28.  
     
29.  
    }
30.  
     
31.  
    div{
32.  
     
33.  
       width:10rem;
34.  
     
35.  
       height:10rem;
36.  
    }

就以我们最常见的几个手机型号为例，上述代码的表达的是，

（1）当页面处于视口为320px的设备下，html根节点的字体大小为12px，那么div 的宽高为120px*120px;

（2）当页面处于视口为375px的设备下，html根节点的字体大小为14px，那么div的宽高为140px*140px;

（3）当页面处于视口为414px的设备下，html根节点的字体大小为16px，那么div的宽高为160px*160px;

 

那么为什么要这样使用呢？

在移动端，如果的你设置一个div的宽高都固定为200px的情况下，在414px视口下面，一行你可以放下两个div，那么在小于400px以下的视口设备中你都只能放下一个，这样就会是得布局错乱，好比一个物体在一个超大空间中显得很小，但是在小的空间存放不下，为使得页面布局不管在什么设备上都是正常，协调的情况，就会采用媒体查询 + rem，来根据不同的设备去相应的改变元素的大小