网络干货 ·

[教程]灵活运用@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,就可以做到响应式布局,并且能为各个端及其设备标识做出更多的布局样式,还可以为一定分辨率下的设备写出惊喜的彩蛋。

参与评论