网络干货 ·

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

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

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

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

用法

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

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

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

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

实际操作

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

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

 

其他参数

最后

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

参与评论