Personal Blog
0%

自适应布局

发表于 更新于 分类于

grid

css

1
2
3
4
5
6
7
8
9
10
.main{
        display: grid;
        grid-template-columns:repeat(auto-fill,27rem);
        grid-gap:3rem 1.5rem;
}       
.main > .item{
        background-color: blue;
        width:100%;
        height: 100px;
}

html

1
2
3
4
5
6
7
8
9
10
11
12
<div class="main">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
</div>

以上代码效果能让每一行都尽量铺满

table

css

1
2
3
4
5
6
7
8
9
10
11
12
.container{
    display: table;
    width: 100%;
    border-spacing: 30px 0;
}
.container >div{
    display: table-cell;
    background-color: #00ffff;
    border: 1px solid black;
    height: 200px;
    width: 25vw;
}

html

1
2
3
4
5
6
<div class="container">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>
item
item
item
item

flex

css

1
2
3
4
5
6
7
8
9
10
11
.main{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;             
}
.main > .item{
    width: 300px;
    background:linear-gradient(45deg,black,transparent);
    height: 100px;
}

html

1
2
3
4
5
6
7
8
9
10
11
12
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

以下原文

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
// 红米Note2
@media screen and (min-width:360px) {
	html, body, button, input, select, textarea {
		font-size:13.5px;
	}
}
@media screen and (min-width:375px) {
	html, body, button, input, select, textarea {
		font-size:14.0625px;
	}
}

JS设置html的font-size大小

1
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

vw

1
2
3
4
//使用vw设置，vw也是一个相对单位，100vw等于屏幕宽度
html{
    font-size: 10vw;
}