Fork me on GitHub

响应式布局

发表于 | 分类于 |
字数统计: 1.3k字 | 阅读时长 ≈ 5分

一个页面适配多种设备和多个屏幕

视口

viewport，浏览器中用于呈现网页的区域，视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。
手机端与PC端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android 基本都将这个视口分辨率设置为 980px。

语法

html

1
<meta name='viewport' content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  • width=device-width：视口为设备宽度，手机厂商设置或默认 980px
  • initial-scale=1.0：初始化的视口大小为 1.0 倍
  • maxmum-scale=1.0：最大的倍数是 1.0 倍
  • user-scalable=no：不允许缩放视口

手机浏览器内核

  • 微软 Trident
  • 火狐 Gecko
  • 开源内核 Webkit
  • Opera Presto
    Webkit 内核的适用范围则较为广泛，Android 原生浏览器、苹果的 Safari、谷歌 Chrome(Android4.0 使用)都是基于 Webkit 开源内核开发的。
1
2
3
4
5
浏览器兼容前缀
-ms-
-moz-
-o-
-webkit-

媒体查询

针对特定的设备或条件为网页应用特定的 css 样式。

语法

媒体查询外面写的第一条规则是基本的样式，适用于任何设备，然后为不同的视口，不同能力的设备，添加不同效果。
需要配合视口使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    background-color: grey;
 }
@media screen and (min-width:1200px){ //宽度大于1200像素
    body{
        background-color: pink;
 }
}
 @media screen and (min-width:700px) and (max-width:1200px){ //宽度大于700像素小于1200像素
    body{
        background-color: blue;
    }
}
@media screen and (max-width:700px){//宽度小于700像素
    body{
        background-color: orange;
    }
}

screen表示看这个网页的设备是显示器，而不是残疾人听力设备、也不是打印机。后面用 and 符号匹配可能性。

rem 响应式布局

rem:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的。
em:表示当前父元素的字号的倍数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div style='font-size:10px'>
    <span>box1</span>
    <div style='font-size:2em'>
        <span>box2</span>
        <div style='font-size:2em'>
            <span>box3</span>
            <div>
                <div style='font-size:2em'>
                    <span>box4</span>
                </div>
            </div>
        </div>
    </div>
</div>

em

rem 可以和媒体查询配合实现响应式布局

1
2
3
4
5
6
7
8
9
@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

流式布局

分比布局也叫作流式布局、弹性盒布局。
使用百分比设置width，height，padding，margin

运用场景

如果移动端和 PC 端公用一套代码，建议使用流式布局。
如何做一个 REM 响应式布局

  1. 从 UI 设计师拿到PSD设计稿,然后在样式中给 HTML 设定一个font-size的值，我们一般都设置一个方便后面计算的值，例如：100px
1
2
3
html{
  font-size:100px; //1rem=100px
}

  1. 首先按照设计稿的尺寸来写样式，把得到的像素值除以100计算出对应的REM值。
    值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局。

    1
    2
    margin:0 0.2rem;
    height:3rem;

  2. 根据当前屏幕宽度和设计稿的宽度来计算出font-size的值。
    例如：设计稿宽度为 640px,其中有一个部分是轮播图，它的尺寸是 600*300，在样式中给 HTML 设定一个font-size的值为 100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为 375px,其font-size应该设置为多少。

1
375/640*100->font-size=58.59375//此时轮播图能自适应手机屏幕大小

根据当前屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的font-size值应该是多少，如果font-size的值改变了，之前设定的所有 REM 单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现：

1
2
3
4
5
6
7
8
<script>
~function(){
    var desW=640,
    winW=document.documentElement.clientwidth,
    ratio=winW/desW;
    document.documentElement.style.fontSize=ratio*100+"px";
}();
</script>

但如果当前屏幕宽度大于设计稿宽度，图片会被拉长而失真，所以以上代码需要稍微做些修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//html部分
<section id="main">
<div class="box"></div>
</section>
//js部分
<script>
~function(){
    var desW=640,
    winW=document.documentElement.clientwidth,
    ratio=winW/desW;
    var oMain=document.getElementById(main")；
    if(winW>desW){
        oMain.style.width=desW+"px";
        oMain.style.margin="0 auto";
        return;
    }
    document.documentElement.style.fontSize=ratio*100+"px";
}();
</script>
-------------本文结束感谢阅读-------------