[教程]灵活运用@media screen,简单写响应式布局

什么是自适应响应式布局，来看这张GIF。

你以为自适应响应式布局仅需要写上“width：100%”就可以了吗，NONONO。整体外框架使用width：100%效果一般，一般多用于内框架，最外层div依旧是推荐固定值。当然，头部与底部使用100%更好。

一般写响应式布局都需要@media来完成，也就是根据当前浏览器分辨率来进行布局改变，说白就是自适应响应式，即所变so可见，那么@media的用法是怎样的？

用法

该代码的形式是这样的（这句代码的意思为：分辨率小于1920执行的CSS代码）

@media screen and (max-width: 1920px) {

  }

所有需要改变的内容写到{中}

举个例子，正常情况下是这样的，也就是任何分辨率及其电脑上的显示内容，那么我希望分辨率在改变的同时，改变内容。

.ikmoe{
	width:100px;
	height:100px;
	background-color:red;
	font-size:25px;
}

在小于分辨率720P的情况下，我希望它在不改变其他属性的情况下，仅仅改变宽与高，那么就可以这样单独写，将会被覆盖原来上面的样式。

@media screen and (max-width:1366px){
	.ikmoe{
		width:50px;
		height:50px;
	}
}

实际操作

将720P以上(包含720P)显示表情框为宽屏模式，则只需要更改原样式。

.smiliepad {
	width: 830px;
	height: 420px;
}

为了让移动端也可以正常的使用表情，那么就需要为移动端分辨率额外增加一个CSS样式，这里将720P以下的分辨率统统改成了竖行显示，及其改变了表情图片的大小。

@media screen and (max-width:1365px) {
	.smiliepad {
		width: 250px
	}

	#ik-wp-smiley {
		width: 65px
	}
}

其他参数

分辨率大于720P
@media screen and (min-width:1366px){}

分辨率大于1366且小于1920
@media screen and (min-width: 1366px) and (max-width: 1920px){}

分辨率小于1366
@media only screen and (max-width: 1366px) {}

最后

灵活运用该参数后，可以无需js，就可以做到响应式布局，并且能为各个端及其设备标识做出更多的布局样式，还可以为一定分辨率下的设备写出惊喜的彩蛋。