媒体查询见解 适配手机端：本周困扰：我的感悟：

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

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

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

我的感悟： <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) 将此行代码注释后的效果：

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

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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。