原本在网站的右边栏设置了一个二维码,但是在群友说移动端显得很难看。于是我用几行css实现了在小屏幕上不显示指定元素,特此分享一下实现方案。

原本在博客的右边栏有"赞助商"和“生活号”两个位置。但是被群友吐槽图片太大了显得不好看:

被吐槽太丑

于是我就试着用CSS来根据屏幕大小是否显示这一块的内容,除了公众号二维码,也对AdSense进行了适当的控制。

以handsome主题为例,在后台的自定义CSS中写入代码:

@media screen and (max-width: 768px) {
.smallscreen{
display:none; }
}

然后再移动段不想显示的地方的class里添加“smallscreen”:

例如:

class里添加smallscreen

然后下面左边是移动端(安卓手机,即小屏)的情况,右边是电脑端(即大屏)的情况:

效果

当然,对于div标签里的内容也是一样的:

div标签里添加显示控制

虽然实现的代码很简单,但是很有意思,效果也不错。

通过css代码控制再不同的显示情况,可以提高用户的浏览体验。

过段事件我应该会专门来学习一下CSS,因为我发现CSS在PyQt中也可以很好的使用,可以对界面美观进行设计。


博主个人公众号
版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2022/cssdisplay.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!

最后修改:2022 年 07 月 31 日
如果觉得我的文章对你有用,请随意赞赏