释放双眼，带上耳机，听听看~！
之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍.
现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分简单,通过JS原生代码,或者是@media,都可以进行响应式布局,下面我们来试试.
利用原生JS代码实现响应式布局
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .container{
12 height: 30px;
13 background-color: red;
14 margin: 0 auto;
15 }
16 </style>
17</head>
18<body>
19 <div class="container">
20 </div>
21 <!--
22 四个档位 1170 970 750 100%
23 -->
24<script>
25
26 window.οnlοad=function () {
27 //1.拿到container标签
28 var container = document.querySelector('.container');
29
30 windowChange();
31
32 //2.监听窗口发生改变...
33 window.addEventListener('resize',windowChange)
34
35 function windowChange() {
36 //3.拿到口的宽度
37 var windowWidth=window.innerWidth; //width + padding
38
39 if(windowWidth>=1170){
40 container.style.width=1170+'px';
41 }else if(windowWidth>=970){
42 container.style.width=970+'px';
43 }else if(windowWidth>=750){
44 container.style.width=750+'px';
45 }else{
46 //...
47 container.style.width='100%';
48 }
49 }
50 }
51</script>
52</body>
53</html>
54
其实有基础的朋友看眼代码就能理解了,所谓响应式代码就是监听了window的宽度,当宽度改变到一定程度时,布局相应的进行变化,这就是简易的响应式布局.如果认为JS原生代码很麻烦?不喜欢敲?可以,我们还可以通过媒体查询来实现.
媒体查询实现响应式布局
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11
12 .container{
13 height: 30px;
14 background-color: red;
15 margin: 0 auto;
16 }
17
18 /*... 750*/
19 @media (max-width: 750px){
20 .container{
21 width: 100%;
22 }
23
24 }
25
26 @media (min-width: 750px) and (max-width: 970px){
27 .container{
28 width: 750px;
29 }
30 }
31
32 @media (min-width: 970px) and (max-width: 1170px){
33 .container{
34 width: 970px;
35 }
36 }
37
38 @media (min-width: 1170px) {
39 .container{
40 width: 1170px;
41 }
42 }
43
44 </style>
45</head>
46<body>
47
48 <div class="container">
49
50 </div>
51
52 <!--
53 四个档位 1170 970 750 100%
54 -->
55</body>
56</html>
57
@media标签,其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。不过该标签是CSS3的,对于IE老版本(IE9-)的兼容性存在问题(为什么老是要为IE去做兼容?),所以大家用的时候注意下.其实媒体查询的逻辑和之前JS的原生代码逻辑相同,所以这里就不再叙述了
@media其实还有许多的媒体类型,比如@meida all用于所有设备,@media print用于打印设备,@media speech应用于屏幕阅读器等发声设备,@media screen 用于电脑屏幕，平板电脑，智能手机等.
你也可以直接在link里用来判断当某个尺寸时,引入某个css
2
2
这条代码意思是在大于或等于768时使用style.css.
大概的响应式布局就写到这了,很浅显却又很重要的功能,其实如果真要深入,去各类型做适配,也很麻烦,今天就写这么多吧.
