响应式网页

本文最后更新于:2020年1月17日 上午

响应式网页制作

毕业步入前端实习的开始,初期整理了公司的考核,就是仿某网站做一个静态网页;包括自己写一个轮播或者日历,后来花了点时间整理了下静态网页知识点,写进了个网页。

Css才是最妙的语言啊,giao!😼


🌈HTML的搭建

布局选择了display:grid网格布局;
基本思路是背景图片固定在背后,然后两个div左右排布用作网格布局;
左边的div我用来放置一个图片装饰,右侧的div用来放置登录Form和头像等元素;
然后底部的版权等文字单独设置。


🌈Css的样式配置(仅重要知识点总结)

一、首先是全局设置,使用了box-sizing: border-box;

1
2
3
4
5
6
7
/* 
box-sizing 只有两个属性
1.content-box 默认值,标准盒子模型;
2.border-box
*/
box-sizing: border-box;

🌰 这里会提到box模型,具体请看MDN关于css关于盒子模型的基础知识
🌰 我们通常对html中的元素设置width 同样在MDN也很具体的描述了box-sizing,想了解更详细的知识同样请移步至Box-sizing

Content-box中:

width = 内容的宽度

height = 内容的高度

Border-box中:

width = border + padding + 内容的宽度

height = border + padding + 内容的高度*

1. 在进行响应式布局时候,我们可以大致了解,不希望调整元素的宽和高时候还要过多注意元素的border和padding,只是希望这个元素整体响应式,所有这时候border-box属性很好的为我们提供了解决办法。
2. 并且在div嵌套中使用content-box,子元素设置100%属性,如果此时再给子元素加上border的宽度,那么子元素将会溢出父元素。使用border-box则是加上border和padding刚好放置在父元素容器中。

二、display:gird;网格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
display: grid;
/*
这里 grid-template-colums 指的是 网格列 的宽度设置;
除了可以用固定的 px 为单位,这里还提供了以 fr 为单位;
fr :是网格布局中用单位 fr 来定义网格轨道大小的弹性系数。
每个定义了 fr 的网格轨道会按比例分配剩余的可用空间。
*/
grid-template-colums: 10px 10px/1fr 2fr ;
/*
一般的简写如下,repeat(x,xfr)重复两列网格,每个大小为 1fr ;
*/
grid-template-columns: repeat(2,1fr);

/*
这里的 grid-template-rows 指的是 网格行 的宽度设置;
基本设置与上面设置colums基本相同;
*/
grid-template-rows: 10px 10px/1fr 1fr ;
/*
那么网格之间的间隙则是使用的 grid-gap 来控制
*/
grid-gap: 18rem;

三、display: flex; 弹性布局

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

align-content: flex-start;
align-content: flex-end;
align-content: srratch;
/*
1. Flex是Flexible Box的缩写,意为"弹性布局"
flex的第一个属性: flex-direction: row / column --- 让容器内部元素在横向或者纵向默认排序,
从左到右或者从上到下;
此外,还可以逆向排序,这里可以提供横向或者纵向的逆向排序:
flex-direction: row-reverse;--- 横向逆序
flex-direction: column-reverse; --- 纵向逆序
*/
flex-direction: row / column;
flex-direction: row-reverse;
flex-direction: column-reverse;
/*
2. flex可以默认行内元素换行或者不换行
不换行: 比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
换行: 比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
*/
flex-wrap: nowrap;
flex-wrap: wrap;
/*
3. justify-content 设置元素在页面(主轴)上的排列:
center: 元素在主轴(页面)上居中排列;
flex-start: 元素在主轴(页面)上由左或者上开始排列;
flex-end: 元素在主轴(页面)上由右或者下开始排列;
space-between: 元素在主轴(页面)上左右两端或者上下两端开始排列;
space-around: 每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍
*/
justify-content : center;
justify-content : flex-start;
justify-content : flex-end;
justify-content : space-between;
justify-content : space-around;
/*
4. align-items 元素在主轴(页面)当前行的侧轴(纵轴)方向上的对齐方式:
flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐);
flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐);
center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐);
stretch: 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度;
baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。(靠上对齐),但是后续元素可以根据第一个元素的基线调整;

*/
align-items : flex-start;
align-items : flex-end;
align-items : center;
align-items: stretch;
align-items : baseline;
/*
5.align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。
align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。
*/
align-content: flex-start;
align-content: flex-end;
align-content: stretch;
align-content: center;
aligin-content: space-between;
align-content: space-around;


🌰更多详情请见MDN官方文档;

四、父元素下,定向选择子元素添加Css

1
2
3
4
.input-group :nth-child(1) {
margin-bottom: 4px;
}

🌰 在父元素input-group下,选择第一个子元素,并且给他的子元素添加css样式,那么我们将使用:nth-child()去选择他的子元素。

标准语法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
odd 和 even 是用于可匹配下标是奇数或者是偶数的子元素关键词(第一个子元素的下标是1);
*/
nth-child(odd) / nth-child(even)

/*
或者通过偏移值来选择子元素,(an + b)
n: 0,1,2,3,4....
b: 表示的为偏移值;
2n+0 == even
2n+1 == odd
*/
nth-child(an+b)

五、定位问题

🌰 在此之前,自己关于定位中的样式设置一直存在一个误区:
认为什么情况下都可以设置bottom和right等属性;
一个子元素在父元素中设置相对定位的前提一定要确定好他们的关系;

设置一个 div ID为A,再设置一个div ID为B;

其中A包裹中B;只有先设置A的定位为position: relative;

再将B元素设置为position:absolute;

那么就可以使用right或者bottom等属性设置B元素在A元素的 位置;

🌰 这里一般会使用到当元素重叠时候出现的问题,那么MDN官网给出了一个属性z-index 我们可以设置他的值,去改变元素在页面中堆叠的顺序,这里可能我需要好好的研究下;

六、过渡动画

🌰 这里可能需要单独开一个blog来总结一下,个人觉得过渡动画以及h5的Canvas是个很有趣的知识点;

七、媒体查询

🌰 那么除开,前面一些知识点,个人感觉比较有趣的就是这个媒体查询了,它能根据页面的不同宽度显示不同的内容,具体语法请看下面:

@media all and (min-width:xxxpx)

​ all: 所有设备;

print: 打印预览图;

screen: 显示器,笔记本,移动端的;

tv: 电视;

handled: 便携设备以及平板笔记本等;

🌰 例如在css中,我们可以单独设置媒体在什么宽度时候设置不同的内容显示问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (max-width: 768px) {
.wave{
display: none;
}
.img{
display: none;
}
.container{
grid-template-columns: 1fr;
}
.login-box{
justify-content: center;
}
}

🌈 Always.