响应式

定义

利用一套代码实现页面的布局和排版以适配不同分辨率的设备

视口宽度与设备宽度

width
device-width 设备屏幕宽度

viewport视口

步骤

Step1

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content="width=device-width, minium-scale=1.0, maximun-scale=1.0, user-scale=no">

Step2

@media

min-width
max-width
min-height
max-height
orientation=portrait
orientation=landscape

媒介查询

小屏幕 <=768px
平板 >=769px
中等屏幕 >=1024px
大屏幕 >=1200px

<!--用法1-->
<link rel="stylesheet" media="(max-width:640px)" href="max-640.css">


<!--用法2-->
<style>
    @media (max-width:768px){
        //Code
    }
</style>

CSS单位

px

一个px相当于1个像素

em

相对的长度单位。em相对参照物为父元素的font-size，em具有继承的特点 1em = 16px

rem

参照物为根元素的html，相于参照物固定不变，所以比较好计算 1rem = 16px

font-size:62.5% 1rem = 10px;

font-size:100% 1rem = 16px;

font-size:10px;

vh

可视范围的高度

vw

可视范围的宽度

布局

一个容器里面放三个盒子
设置两侧盒子宽度固定
中间盒子宽度100% 和最小宽度防止缩小后变形
设置中间盒子padding等于两侧盒子的宽度
让三个盒子在同一个方向浮动
设置左边盒子margin-left:-100%;
设置右边盒子margin-left:-自身的宽度

圣杯布局

*{
    margin: 0;
    padding: 0;
    list-style:none;
}
.container{
    min-width: 400px;
    height: 200px;
    background: red;
    padding:0 200px;

}
.left,.right{
    width: 200px;
    height: 200px;
    background: pink;
    float: left;
}
.main {
    width: 100%;
    height: 200px;
    background: blue;
    float: left;
}
.left{
    margin-left:-100%;
    position: relative;
    left: -200px;
}
.right{
    margin-left: -200px;/*-自己的宽度*/
    position: relative;
    right: -200px;
}

双飞翼布局

内容区域多了一个盒子

盒子设置margin:0 200px给两边腾出位置

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        min-width: 400px;
        height: 200px;
        background: green;
    }
    .left,.right{
        width: 200px;
        height: 200px;
        background-color:pink;
        float: left;
    }
    .main{
        width: 100%;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .main-content{
        margin:0 200px;
    }
    .left{
        margin-left: -100%;
    }
    .right{
        margin-left: -200px;
    }
</style>

<div class="container">
    <div class="main">
        <div class="main-content">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

赏