浅谈媒体查询

Posted 2021-12-28 陌上钰

媒体查询见解

• 适配手机端：
• • 本周困扰：
  • • 我的感悟：

适配手机端：

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

本周困扰：

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

大家也看到了，此处无法适配手机端，且出现警告，说明此处
的问题，但在我的网页开发工具里却未报错，因此很让人头疼。

我的感悟：

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

大家看到图片成功适配手机端，问题得到解决，图片直观
地表达了我的问题及我的困扰与感悟。

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