轻松使用css @media screen实现屏幕自适应

头像
码农笔录
2021-10-15 前端 阅读量 2122

我的博客之前只有PC版,手机打开很多会重叠到一块,因为是做后台开发的,所以对前端不是很擅长,以为只能通过js动态修改样式或者为移动端单独写一套UI,无意间发现使用css @media screen 可以轻松实现屏幕自适应,真是省时省力。

当页面小于1000px的时候执行它下面的CSS

@media screen and (max-width: 1000px) { .comms-left-root{ display: none; } .blog-root{ width: 80%; } }

当页面小于678px的时候执行它下面的CSS,可以理解为手机上展示的时候。

@media screen and (max-width: 678px) { .comms-left-root{ display: none; } .blog-root{ width: 98%; } }

我的博客详情左侧有个百度的广告,当页面小于1000px的时候,我们就缩小margin并隐藏掉广告,不能影响到文章阅读。当页面小于678px的时候,我们就大幅缩小margin,几乎没有边距,可以F12拖动屏幕试试效果或者看下图的效果。

这是正常的展示:

image.png

这是小于1000px的效果,边距缩小,隐藏了左侧浮动框。

image.png

这是小678px的效果,边距缩小的基本没有了,顶上的菜单也隐藏的只剩3个,当然菜单你可以设置为点击下拉,这种比较常见。

image.png

这是我的代码,是不是很省时省力,因为界面也不多,不到一小时就适配好了,自己也在手机上亲测过,完美适配。

image.png