CSS媒体查询“@media”在调试中切换移动设备时不起作用。

今天在学习CSS响应式网页设计中的媒体查询，遇到个有趣的问题，主要就是在调试过程中切换移动设备和电脑，同样的代码将有不同的结果。在切换移动设备调试时@media对于"max-width=979px"及以下的设置失去作用。（主要的疑问，在 max-width>=980px 的设置时，它是有作用的）

首先这段是我代码的关键语句。

<style>@media only screen and (max-width:979px){body{background-color:lightblue;}}
</style>
/*屏幕低于979像素时，body颜色变为浅蓝色*/

现在我打开chrome调试。

也就是媒体查询@media max-width:979px 时移动端调试不起作用。

紧接着我开始了一些无用的代码调整，直到最后添加一条视口viewport代码后，终于可以正常显示了。

<head><meta name="viewport" content="width=device-width" initial-scale="1.0">
</head>

最后：我也发现了可能是导致这个问题的主要原因，在调试过程中（或者可能实际运用中），未设置viewport的页面，存在于低于980像素宽度的移动设备后，整体页面和body的宽度将不随着设备的宽度变小而变小，它将一直停止在980px（直到设置viewport)。

天那！body经过viewport的帮助下终于突破了980px的限制，
并且成功的执行background-color:lightblue

OK，这就是我在今天学习响应式页面遇到的问题和分析（当然可能我存在很明显而又幼稚的错误

CSS媒体查询“@media”在调试中切换移动设备时不起作用。相关推荐

CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
前言在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用,然后就模仿里边写了个简单例子,代码如下: body {background-color: #f5f ...
css media区间宽带显示,css媒体查询 @media适配不一样大小窗口
版权声明:本文为博主原创文章,未经博主容许不得转载. https://blog.csdn.net/Lockey23/article/details/75452536css CSS3 @media是什么 ...
css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
CSS 媒体查询@media 适配 iPhone 6/7/8、iPhone 6/7/8 Plus、 iPhone X和ipad横竖屏
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
CSS媒体查询 @media
PC端和移动端自适应,自动换行 1 @media screen and (max-width: 850px) { /*以下代码在屏幕小于850的情况下执行*/ 2 .dsad{ /*父类*/ 3 di ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
使用 CSS 媒体查询创建响应式网站
简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
css媒体查询设置高度,css-媒体查询中使用的宽度
css-媒体查询中使用的宽度所有设备(例如台式机,平板电脑,笔记本电脑/ Ipad,Iphone和智能手机)最重要的媒体查询宽度是多少?这些设备有标准宽度吗? 5个解决方案 75 votes 我到处 ...

CSS媒体查询“@media”在调试中切换移动设备时不起作用。

CSS媒体查询“@media”在调试中切换移动设备时不起作用。相关推荐

最新文章

热门文章