响应式开发知识小白入门

网页布局方式

1. 固定宽度布局：为网页设置一个固定的宽度，通常以px作为长度单位，一般pc端网页
2. 流式布局：为网页设置一个相对的宽度，通常以百分比作为长度单位
3. 栅格化布局：将网页宽度人为的划分为均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比作为长度单位来划分成均等的长度
4. 响应式布局：通常检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

一般开发过程中往往是相互结合使用

响应式布局

作用：实现在不同屏幕分辨率的终端上浏览网页的不同展示，使网站在手机和平板上有更好的浏览阅读体验。
一般用在企业的官网、博客。新闻资讯类型网站，这些网站以浏览器内容为主，没有复杂的交互。

1. 在移动互联日益成熟的时候，在桌面浏览器上开发的网页已经不能满足移动端设备的展示和阅读
2. 通常做法是对移动端单独开发一套特定的版本，但是如果移动端设备越来越多的时候就会因为需要适配所有屏幕而造成开发成本增大，并且维护成本也变大
3. 响应式开发的目的就是一个网站能够兼容多种终端，在新建的网站上一般都会使用响应式开发

媒体查询

设置不同屏幕宽度下的样式

1. 查询媒介：查询到当前屏幕的宽度，针对不同屏幕宽度设置不同的样式来适应不同屏幕，当重置浏览器大小的过程中，页面也会根据相应的浏览器宽度个高度重新渲染页面
2. 实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局
   

用法

/*and 连接条件，内容是符合条件时渲染的样式*/
@media screen and (min-width: 992px) and (max-width: 1200px) {
	body{
		background-color: pink;
	}
}

注意：
如果是判断最小值，那么就应该从小到大写–bookstrap就是判断最小值，
如果是判断最大值，那么就应该是从大到小写
min-width：在PC端和移动端都能正常响应，效果一致，它是指当前可视区域的宽度
min-device-width: 在移动端可以实现，但在pc端时不会响应

	<style type="text/css">
		body{
			background-color: red;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="index.css" media="screen and (min-width: 992px) and (max-width: 1200px)">

调用外部样式的响应式写法
screen位置

and的位置还可以是 not 或者 only

/* 取反 */
@media not screen and (min-width: 768px) {
	
}