浅谈媒体查询

适配手机端:

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

本周困扰:

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


在这里插入图片描述

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

我的感悟:

首先,我们每个人都知道适配手机端要用的是媒体查询,并应
用了媒体查询,但却没有效果,这是因为我们有可能在最上面
时引用了网页无法识别的代码,导致媒体查询失效。我的网页
便是如此。下面是我的错误引用:
meta name=“viewport” content="width=device-width,
initial-scale=1.0 ",此行导致无法适配手机端
@media screen and (max-width: 480px)
将此行代码注释后的效果:
在这里插入图片描述
大家看到图片成功适配手机端,问题得到解决,图片直观
地表达了我的问题及我的困扰与感悟。

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>