CSS3自适应布局

视口单位(Viewport units)

什么是视口?

在PC端,视口指的是在PC端,指的是浏览器的可视区域;

而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范,视口单位主要包括以下4个:

1.vw:1vw等于视口宽度的1%。

2.vh:1vh等于视口高度的1%。

3.vmin:选取vw和vh中最小的那个。

4.vmax:选取vw和vh中最大的那个。

vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

实现圆角边框

圆角边框(border-radius)的基本用法:

1
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
圆角边框的最基本用法就是设置四个相同弧度的圆角

boder-top-left-radius:30px; //左上角

boder-top-right-radius:30px; //右上角

boder-bottom-left-radius:30px; //右下角

boder-bottom-right-radius:30px; //左下角

如果这四个弧度的圆角相同,可以写成:

border-radius30px

例子:

css部分:

.div1{

margin:0 auto;

background: darkcyan;

width:200px;

height:200px;

border:2px solid darkslategray;

border-radius:30px;

text-align: center;

line-height: 200px;

}

html部分:

<div class="div1">圆角边框</div>
1
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
圆角边框也可以使用百分比作为单位,比如:将一个正方形的圆角边框设置为50%,那么就会形成一个圆,不过使用百分比与像素并不能等效。

注意:百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半

例子:

css部分:

.box1{

width:200px;

height:200px;

margin: 30px auto;

border: 2px solid #e4007e;

text-align: center;

line-height: 200px;

font-weight: bold;

font-size: 24px;

background: burlywood;

border-radius: 50%;//圆角百分比

}

html部分:

<div class="box1">这是一个圆</div>