MENU

CSS3|用@media screen实现简单自适应

September 1, 2018 • 技术,笔记

有时候我们希望网站的一段内容只在手机或只在电脑上显示,比如本博客底部的备案号,只在PC端显示,这其实就是用到了我们今天要说的@media screen来实现。

举个栗子

<span class="lizi">我是栗子</span>

比如我们现在要上面的文字“我是栗子”只在屏幕尺寸大于500px时显示,这时便可以使用@media screen and (max-width:500px)进行CSS控制,代码如下

@media screen and (max-width:500px){/*当屏幕宽度在500px以内时*/
  #lizi{display:none;}
  /*让该元素不显示*/
}

我这里也仅是给提供一个思路,如果你是想让元素在大于某个像素值下执行某段CSS代码,只需要将CSS代码写在@media screen and (min-width:500px)里面即可

Last Modified: January 30, 2019
Leave a Comment

3 Comments
  1. 皮皮小站 皮皮小站

    这个写法刚好在书上看到了233

    1. @皮皮小站这也是最近改网站的时候学到的一个小技巧

  2. 头条新闻 头条新闻

    文章不错非常喜欢