小菜鸡的html初步教程（第十二章初步构建响应式网站）

万七生

于 2019-03-19 16:16:13 发布

阅读量396

点赞数

文章标签： html5基础 CSS基础响应式网站

本文链接：https://blog.csdn.net/qq_41319331/article/details/88665110

版权

小菜鸡的第三篇博客

今天是3/19，天气不错，跑到自习室来更新博客。
本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
昨晚我思考了下，决定对于格式将会使用代码块，对于格式的元素将会直接加粗。这样的话可以简化我的书写，同时对整体的美观会有提升（至少我是这么觉得的）同时我昨晚通过手机端访问了我的文章，然后发现代码块显示的时候是黑色，而不是我专门挑的护眼的黄色（摊手）

言归正传

今天咱们来看看第十二章——响应式构建网站，这个章节将会是一个复杂的章节（我这么说的意思是，本章节我写的可能会偏枯燥（因为我自己写的也麻烦）但是我会尽量让读者明白我在说什么，知道我输入的每一行代码都是做什么的。
首先，我刚刚找了下关于文本缩进的方式,然后我终于可以在文本内添加缩进了，提升了阅读体验（但是前两篇文章我懒得改了）

第十二章构建响应式网站

在本章中，你将了解到如何构建在各种设备上都能正常工作的网站，它能根据设备的功能和特征对布局进行调整。

响应式web设计：概述
创建可伸缩图像
创建弹性布局网格
理解和实现媒体查询
组合使用
兼容旧版IE

看起来本章小节数少了很多是不是，这是个噩耗，意味着你目前能掌握的只是这一点点，如果想要深入了解，那么你需要再额外学习更多更复杂的东西，而不是看完我这篇文章之后就能全部融会贯通。

1.响应式WEB设计：概述

看到“描述”这俩字你就知道这个和序言没啥区别，和我上面说的“在本章中……”这是一个内容。

2.创建可伸缩图像

创建可伸缩的图像的意思在于

.ss{
	width:1515px;
	height:1515px;
	}

<img src="1.jpg" class="ss">

在这里插入图片描在这里插入图片描述述

这就是它的意义，当图片尺寸过大式，它就会显示成像图一一般大小，极其影响观赏体验
于是我们把格式改成

.ss{
	width:1515px;
	height:1515px;
	max-height:100%;
	max-width:100%;
	}

在这里插入图片描述
在我们添加了max-height:100%; max-width:100%;之后，显示正常，同时通过代码的max可以看出，这里为最大大小显示为100%，不论设定为多大，如果设定小于**100%**那么会按照设定的大小来显示。

.ss{
	width:105px;
	height:105px;
	max-height:100%;
	max-width:100%;
	}

在这里插入图片描述
如上述，当我将数据修改之后，即使使用的仍然是max-height:100%; max-width:100%;，但是图片的设定大小小于100%，故按照设定的大小来显示。

3.创建弹性布局网格

在本小节中，提到的是将max-height: max-width:;的值用百分数替代具体数字，以达到更好的美观效果

.ss{
	width:20%;
	height:20%;
	}

在这里插入图片描述

在这里你将会发现，当我将max-height: max-width:;的值用百分数替代具体数字后，图片将会进行自我缩放（上图中我以背景代码为参照物）当我把网页缩小时，网页内的图片也进行缩小，以获得最佳的观赏体验。同时，min-height: min-width:;的使用方式类似，可以用上述方式类推。

4.理解和实现媒体查询

这里讲了什么呢，就是添加一些限制条件，例如仅在屏幕中显示media:"screen"或者只在打印的时候显示出来。举个例子：

@media only screen and (min-width:480px){
		p{
			color:red;
			font-weight:bold;}
		}

上述代码为添加在格式中的，具体意思是：仅当媒体类型为screen且视觉区域最小宽度仅为480像素时，使用下面的样式规则。

<link rel="stylesheet" media="only screen and (min-width:480px)" href="style-480.css">

上述代码为添加在头文件中的，意思是：仅当媒体类型为screen且视觉区域最小宽度为480像素时，加载并使用style-480.css中的样式规则。CSS中orientation属性这是一个媒体查询使用的属性，如果对响应式感兴趣可以看看。因为本章只是浅易讲解响应式，并未涉及到具体的移动端使用，故更多的附加内容不做讲解，如果有感兴趣的可以自行百度查阅，或者等待我的后续更新，或者在评论区和我说明，我将会提前更新响应式的进一步内容。

5.组合使用

这里主要讲的就是怎么样将前面的内容和刚刚学的响应式结合起来，依旧举个例子：

@media only screen and (min-width:30em)and (max-width:47.9375em)
{
	.about{
		overflow:hidden;
	}
	.about img{
		float:left;
		margin-right:15px;
	}
}

就是这样，将响应式添加到格式中，针对不同的web网页设计不同的显示模式。

6.兼容旧版IE

这个怎么说呢，引用我前面的话，就是我学习如何维护安卓9.0的时候，我要学习安卓5.0，因为还有人在用安卓4.0，就是这个意思（反正我是懒得学（摊手）
目前看来异常的顺利，好像没花多少时间就写完了，但是这仅仅是响应式的开始，我以后将会在深一步的学习中再写关于响应式的博客。（把奶茶喝完就看数据结构（感谢谢丽霞小姐姐的奶茶 ?）