浅谈媒体查询

适配手机端：

    相信大家在制作网页时有时候会遇到无法适配手机端的问题，
这个问题也困扰了我很久，一个偶然的机会，我成功地让自
己的网页适配了手机端，接下来我就对我的情况进行阐述，
希望能对大家有所帮助。

本周困扰：

在上一周我们进行了前端的考核，在那次考核中，我无法让自
己的网页适配手机端，从而在考核中失利，对此，我心中十分
在意，在考核结束后，我积极地向他人请教，希望能够让自己
对适配手机端更加了解，但是每个人的网页布局及相关内容都
有所不同，所以我的问题未能得到有效解决，我经过了数次尝
试，终于找出了问题所在，并解决了这个问题。

大家也看到了，此处无法适配手机端，且出现警告，说明此处
的问题，但在我的网页开发工具里却未报错，因此很让人头疼。后来我将此代码注释或删除多余的空格，总算是将此警告消除。后来我又重新写了一个手机端，并设置了手机端显示和电脑端显示的代码，使得页面效果呈现出来。

我的感悟：

<style>
    .dnd {
        display: block;
        float: left;
    }

    #sjd {
        width: 100%;
        display: none;
        height: 1990px
    }

    @media only screen and (max-width: 500px) {
        .dnd {
            display: none;
            
        }

        #sjd {
            display: block !important;
           
        }
    }
</style>

首先，我们每个人都知道适配手机端要用的是媒体查询，并应
用了媒体查询，但却没有效果，这是因为我们有可能在最上面
时引用了网页无法识别的代码，导致媒体查询失效。我的网页
便是如此。下面是我的错误引用：
meta name=“viewport” content="width=device-width,
initial-scale=1.0 "，此行由于我多加了空格，导致报错，
@media screen and (max-width: 480px)
将此行代码注释后的效果：

在加上我的手机端与电脑端显示与隐藏的相关代码，大家看到图片成功适配手机端，问题得到解决，图片直观地表达了我的问题及我的困扰与感悟。

    以上就是我对媒体查询的部分见解，希望能对有着这种情况的
 前端伙伴有所帮助。