媒体查询 @media 页面切换今天在工作中用到了@media，感觉对于自适应来说还是非常好用的，顺便总结一下用到的几

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

工作用到了@media，感觉对于自适应来说还是非常好用的，顺便总结一下用到的几个切换页面方法。

@media

先来举个例子帮助理解吧

    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }

这段代码的意思是，当screen的宽度小于600px时，把背景颜色变为lightblue。
这有什么用处呢？为什么要这有把背景色改掉，直接js判断获取元素再修改不好吗？\

说一下工作的大概要求吧，做一份邮件页面，pc、h5 自适应并提供中英文切换的按钮，不能引用本地css、png、font等资源。本来是挺简单的，我直接把资源都放在远程服务器上，link外联，管你有多少样式切换，我直接搭配display实现。不过现实往往比想象的残酷，一些不知名情况出现了。

后端发出的邮件直接css失效，用display切换的页面都依次出现在了一个页面上，要多丑有多丑。同事把页面给我看的时候，我也立即反应出来，这肯定是css的问题，那我就去网上搜啊，有没有同学们遇到这样的情况，果然，网上有解答，那就是邮件引入的远程css样式无效，还有一些标签也会无效。等于是邮件导入页面的时候，不想让你css进来，光把文字图片给展示出来。

怎么办呢，不写远程引入的吧，写内嵌或者行内样式。可是四种样式咋写呢，这时候先想着写的是内联样式，直接写四个页面，然后我直接切换页面不就行啦，可是领导是觉得我这方法太麻烦了，建议我先用内联样式试试。我也知道内联写上去方便一点，可是咋实现样式切换呢，我还在想着用js去判断页面，设备，实现切换样式呢，可是这样也很麻烦，因为会有好多地方要判断，js会增加很多烦恼。

这时候再想想@media 这个使用场景，是不是就会觉得用它会很方便了。 @media可以判断屏幕宽度，自适应css,这样我就不用去写js了，我将h5的样式导入到 @media only screen and (max-width: xxx px) 中，那屏幕宽度小于这个xxx px中时，页面不就可以做到切换样式了吗。至于中英文切换，我直接设置两个模板，一个cn 一个en,利用js判断用户需求，设置其中需要的模板display，另一个display：none即可。

切换页面

为什么会有这个问题呢，那就要提到display这个问题了，它即便是内联样式，在邮件中竟然也是会失效，行内样式才有效。想着再试试其它方法，一起给后端试试，看看哪种有效。首先，我做的页面不能留空白，那不展示的页面肯定不能占位，所以虽然隐藏元素的方法有很多，但是我得选择了几种不占位的隐藏方法来切换。

display 内联样式

前文说过，内嵌样式无效，那我就用内联总行了叭，js获取页面，使用display实现切换。
overflow：hidden + height：0px
```
        box1.style.overflow = 'visible'
        box2.style.overflow = 'hidden'
```
通过js获取元素，添加事件，设置overflow样式，这样也可以实现他的切换效果。
position定位 设置绝对定位相对定位，设置位置信息，让页面移出可视区域。
```
      box1.style.left = '-29999px'   //随便设的值
      box2.style.top = '-39999px'
```
以上三种方法可以让元素实现不占位隐藏，对于做切换的效果来说，还是非常不错的。