腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
如何创建既适用于设备宽度又适用于宽度媒体查询
android
、
css
、
media-queries
、
responsive-design
当我调整页面大小时,我尝试让这个媒体查询在桌面和移动电话上都能工作。 这是在移动设备上的工作 @media screen and (max-device-width: 320px) { ... } 这是桌面上的 @media screen and (max-width: 320px) { ... } 但是我不能让它们都工作,我试着使用or运算符,但是不起作用。
浏览 1
提问于2012-06-09
得票数 0
回答已采纳
1
回答
使用媒体查询时CSS不在移动上工作
html
、
mobile
、
media
、
device
我试图让媒体查询工作在手机上。我使用了适当的@ media查询以及最小/最大宽度大小。它在我的电脑上工作,但在我的移动设备上不起作用。还请注意,我已经在头部添加了适当的元标签。 <meta name="viewport" content="width=device-width,initial-scale=1"> @media only screen and (max-width: 480px){ #top-table{ background-color: green; } } 我使用的是三星GalaxyS5,不过我希望
浏览 1
提问于2016-07-29
得票数 5
4
回答
如何在大屏幕上显示移动屏幕设计?
javascript
、
html
、
css
、
media-queries
在设备之间切换设计时,我遇到了问题。我知道css3 @media查询是用来根据设备宽度、方向等来处理的。 就设备大小而言,css媒体查询在大屏幕或移动屏幕上非常正常。 e.g 这是移动屏幕大小的设计。 这是大屏幕的设计 媒体查询可以很好地切换设计。但是我想在桌面屏幕上显示移动屏幕的设计,当父div大小很小时,例如等于移动屏幕大小? 在以下情况下,我需要显示移动屏幕的设计桌面屏幕的大小。 我在谷歌上搜索过,但没有找到任何运气。我还尝试使用不同的媒体查询选项。有没有办法解决这个问题? 对不起,我忘记提到我正在使用框架进行响应性设计。
浏览 8
提问于2015-02-12
得票数 3
回答已采纳
1
回答
样式表在移动设备中不能正常工作。
css
、
media-type
我有一个用于移动设备的样式表,其中包含以下代码: /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } 但是,它不能在我的iPhone3GS上工作。当我调整样式表的大小时,这个样式表在浏览器中工作得很好。 如果我将“最大宽度”值设置为更多的px,例如1000 px,那么它可以正常工作。为什么会这样呢?
浏览 0
提问于2013-11-27
得票数 1
回答已采纳
1
回答
如何创建具有响应性设计的网站?
css
、
responsive-design
我建立了网站,并希望使它的移动响应。 它在Chrome和Firefox上运行得很好,但在移动设备上却没有。 虽然它在桌面浏览器上正常工作,但在移动设备上却不能正常工作,但我在检查上进行了测试。 我怎么才能解决这个问题?
浏览 1
提问于2016-05-16
得票数 0
回答已采纳
1
回答
Colorbox fluid布局仅适用于移动设备
responsive-design
、
resize
、
width
、
colorbox
、
fluid
我需要有静态宽度的彩盒窗口(它实际上是动态的-取决于css指定的宽度或图像的实际宽度等)除了手机版。我在做响应式网站。当我调整浏览器窗口的大小时,它总是有固定的宽度,但当我在移动设备上时,colorbox窗口比broser窗口更宽-它不会调整大小以适应浏览器窗口屏幕。我应用这一点: $(window).on('resize', function(){ $.colorbox.resize({width: '100%'}); }); 这是有帮助的,但是如果我返回到非移动设备,或者当我调整浏览器窗口大小时,它仍然是100%。但在这一点上,我想返回colorbo
浏览 0
提问于2014-06-05
得票数 0
8
回答
iOS版Chrome中的媒体查询无法正常工作
ios
、
google-chrome
、
css
、
media-queries
我一直在为一个移动优先网站工作,我发现我的媒体查询在iOS版的Chrome中不能正常工作。似乎无论我使用什么尺寸的设备(iPhone、iPad),以及我在什么方向上查看它,页面都显示了基线(移动)样式和“上方481px”样式的混合版本。我上传了一个小画廊的屏幕截图(带有描述)来说明这个问题。 你可以在上看到这个页面的实况。CSS是无关紧要的,以防您可以通过深入研究了解到任何东西。媒体查询在我测试过的所有其他浏览器中都能正常工作,只有iOS版的Chrome会给我带来这些问题。 编辑:它似乎在我发现的其他一些设备上工作得很好。但是我不能在我的iPhone和iPad上使用UN,因为这些都是我正在开
浏览 0
提问于2012-08-07
得票数 4
回答已采纳
1
回答
媒体查询不工作在桌面上
html
、
css
、
media-queries
我有一个奇怪的问题,我的媒体查询。在我的移动设备上,它们似乎工作得很好,但是当我调整桌面浏览器的大小时,更改就不会被应用。这使得使用web检查器/firebug无法检查我的移动样式。以下是我的媒体查询: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
浏览 3
提问于2013-12-06
得票数 1
回答已采纳
2
回答
媒体查询不适应移动浏览器中的布局
html
、
css
、
google-chrome
、
responsive-design
、
media-queries
我使用了不同宽度的媒体查询。我对移动视图、选项卡视图和桌面视图使用了3个样式表,如下所示:-对于移动视图: @media only screen and (min-width : 120px) and (max-width : 640px) { } 对于选项卡视图:- @media only screen and (min-width : 640px)and (max-width : 980px){ } 对于桌面视图:- @media only screen and (min-width : 980px) { } 当我调整浏览器的大小时,它会显示自适应视图,但在移动设备中签入时,网页仍然显
浏览 2
提问于2015-09-12
得票数 0
1
回答
在移动设备上无法正确加载样式表
css
、
mobile
我刚刚把我的网站迁移到了一个新的服务器上。网站在笔记本电脑上显示正确。当我在我的移动设备上查看网站时,文本不能正确显示(它在以前的服务器上工作正常)。 当我使用Chrome移动查看器检查网站时,它也是正确的,并使用正确的媒体查询显示它应该显示的内容。 你知道为什么它在实际的移动设备上以不同的方式显示吗?
浏览 0
提问于2017-11-04
得票数 0
1
回答
移动设备上的下拉导航
jquery
、
html
、
css
、
mobile
我的公司使用专有的CMS开发网站,我们适应移动开发的能力相当差。我们开发专门针对手机的网站,但我们不会免费提供这些网站。无论如何,我们的大多数网站都使用无序列表的水平导航,当父项目悬停在上面时,子菜单就会出现。这在桌面设备上可以,但在移动浏览器上就不起作用了。子菜单出现了,但它们的功能就像它们是透明的一样,单击子项时不会出现任何地方,或者更糟糕的是,会转到子菜单后面的链接。 我能够编写一个简短的jQuery脚本(我是jQuery的初学者),它强制在单击父链接时使子菜单保持可见。它可以工作,但不是在第一次单击时-第一次单击时,浏览器会尝试启动移动悬停模拟(?)并在屏幕上闪现该子菜单一瞬间。然后,
浏览 3
提问于2013-05-22
得票数 0
回答已采纳
2
回答
视频播放器在手机上旋转时不能调整大小
html
、
video
、
iframe
、
mobile
所有人。我正在写一个网站,并在移动设备上测试它。它部署在这里:http://vizio.distro.tv/web.html 当我将手机水平旋转时,有时视频会变得比屏幕大,我必须用手指放大以适应屏幕。然后,当我将手机垂直旋转时,视频不会回到播放器容器中的原始位置,而是变大并超出屏幕。这个问题在"Live Channel“视频中更为常见。然而,当我在Chrome的开发者工具(使用它的移动设备工具)上测试它时,一切工作正常。 有人能帮我找出问题出在哪里吗?如果需要,我可以提供代码。
浏览 35
提问于2019-10-04
得票数 1
2
回答
CSS媒体查询:使用比较
css
、
mobile
、
media-queries
我想尝试找出一种自适应网页设计的方法,以便与移动浏览器和桌面浏览器共存。 一开始,我觉得在CSS中使用媒体查询是我所需要的,所以我同意了,但谷歌Chrome似乎把我想做的事情搞砸了。 与大多数浏览器相比,大多数情况下只有移动浏览器才能响应定向媒体查询,这似乎是一种针对移动浏览器的好方法,不管屏幕大小如何。然而,出于某种原因,谷歌Chrome不仅会对此做出回应,而且实际上会根据视口的尺寸(窗口本身)来选择景物和肖像,而与屏幕本身的位置无关。 这让我想到了另一个潜在的想法。我注意到,在我的移动设备上,设备宽度和设备高度将根据景观和纵向模式交换位置,而桌面上的谷歌Chrome总是报告显示器的适当尺寸
浏览 6
提问于2015-10-29
得票数 1
回答已采纳
6
回答
如何显示浏览器屏幕宽度?
html
、
css
我正在使用Wordpress与一个响应主题。当我在移动设备上显示内容时,主题将在常规浏览器中正确显示。 当切换到broswers‘桌面模式’时,响应主题的行为有点奇怪。我想这是由于使用的屏幕大小。是否有方法显示已使用的CSS媒体查询? 当CSS说media min-width: 1024px的时候,我能看到屏幕大小的CSS在使用什么吗?或者是否存在一个简单的页面来测试它?或者更好:如何检测浏览器是否请求站点的“桌面版本”并将其用于CSS? 我在谷歌上搜索,但没有找到任何帮助,如何发现它,但没有找到有用的提示。
浏览 0
提问于2019-06-09
得票数 1
回答已采纳
3
回答
响应站点无法在移动设备上正确加载,但在宽度较小的桌面上加载是
html
、
css
、
wordpress
、
mobile
我有个问题,那个wordpress 不能在移动设备上正确加载,但在较小宽度的桌面上加载就可以了。 我有width=device-width和inicial-scale =1的meta标签。 在我的320px宽度的手机上,网站加载大约800px,但当我用320px的桌面浏览器检查它时,它看起来像它应该的样子。 哪里会有问题呢?
浏览 0
提问于2014-10-17
得票数 1
2
回答
媒体查询问题
html
、
css
、
media-queries
我想在移动设备上显示我的网页,类似于桌面版本-我已经做到了。这里我没有给我的页面添加viewport标签。我正在尝试只增加移动设备上的字体大小,因为我已经编写了如下媒体查询: @media (max-width: 576px) 或 @media screen and (max-width: 576px) 当我将浏览器的大小调整到575px时,字体大小在变化,但当我在chrome上实际检查时,我没有看到我已经应用过的媒体查询片段,也没有在实际的移动设备上使用。
浏览 2
提问于2019-11-23
得票数 0
2
回答
如何仅调整响应图像的高度?
css
、
html
使移动设备上的图像更长!我有一个图像(网站的标题),当我将窗口调整为移动格式时,它会调整图像的大小。但是我希望图片(标题)的高度更长! 有可能吗? height: auto; max-width: 100%; 但这并不能使工作变得更宽,也不能让它的高度更长。 当我在移动设备上缩放它时,网站的标题图像应该更长。
浏览 1
提问于2018-01-29
得票数 0
3
回答
我怎样才能让我的形象有反应呢?
css
、
image
、
responsive-design
我试图使我的图像响应,以便当它在移动设备上,de图像将缩小,但我不能让它工作。 我试过百分之百地使用高度和宽度。 有谁可以帮我? 这是我的网站: www.promegaekonomi.se (它是我的门下的大图片)
浏览 1
提问于2014-09-02
得票数 0
回答已采纳
1
回答
媒体查询在chrome和Firefox桌面中工作,但在移动设备中不起作用
javascript
、
html
、
css
、
responsive-design
我有一个网站,当我做媒体查询时,它在我的chrome和火狐上工作正常,当我为不同的设备调整大小时,但当我在移动设备中查看网站时,它得到了对齐问题,主要是在iPhone手机中,我不能在chrome和火狐中查看,所以无法修复它 我的头部部分如下所示: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
浏览 18
提问于2019-11-04
得票数 0
回答已采纳
2
回答
媒体查询在桌面上不起作用
html
、
css
、
media-queries
我有以下媒体查询,可以在移动设备上使用,但默认设置不能在桌面上使用: @media (min-width:481px) { .header-section { width: auto; } .search-block { display:none; } } @media (min-width:320px) { .header-section { width: auto; } .search-block { display:none; } } 这些在手机上工作,但当我在桌面上查看时,显示在下方而不是在任何媒体查询下的默认CSS不起作用。在我的谷歌检查器中,我可以看到这些规则的media="
浏览 1
提问于2013-09-12
得票数 0
2
回答
阻止在桌面视图(横向)上运行移动特定媒体查询(横向)
html
、
css
、
responsive-design
、
media-queries
首先,我真的很抱歉这个问题的标题,因为我不能想出如何描述我的问题,所以这就是为什么我使用这个标题。 现在我开始使用媒体查询,我在我的实践项目中使用它们,因为它的响应性,我想在该项目上应用方向锁定。例如,该项目在移动纵向视图上是兼容的,但在移动横向视图上不可用。 我已经为方向锁应用了以下代码,但问题是,当浏览器窗口调整大小时,当它与屏幕分辨率匹配时,就会应用锁。我不希望锁定应用于桌面视图。 有一种方法是使用设备宽度,但已被mozilla弃用。那么,有没有办法解决这个问题,只有最小宽度或其他东西? 如果你听不懂,请告诉我。 <html> <head> <met
浏览 0
提问于2016-11-30
得票数 1
2
回答
手机无法识别媒体查询
css
、
mobile
、
responsive-design
、
media-queries
所以我有一个有趣的困境,我在一个响应式网站上工作,当我调整我的浏览器大小时,一切都正常工作,但当我从我的iphone查看网站时,它不能从适当的媒体查询中获取查询,我定义为: @media (max-width: 479px) { rules } 这个网站是ericbrockmanwebsites.com/dev2,想知道以前是否有人遇到过这个问题。 任何帮助都是非常感谢的。
浏览 0
提问于2013-03-19
得票数 7
回答已采纳
1
回答
基于EM的媒体查询不适用于Android浏览器v4.3
android
、
css
、
media-queries
、
mobile-devices
我在一个项目中,当从移动设备(我的例子是Android浏览器4.3)打开时,不应用媒体查询。 为了简化这个问题并在这里展示它,我用以下代码创建了一个: <!doctype html> <html lang="es"> <head> <title>EM TESTER</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
浏览 3
提问于2014-09-13
得票数 0
回答已采纳
1
回答
基于“全网页”移动浏览器和屏幕大小的媒体查询
iphone
、
css
、
media
、
screen-resolution
我被要求对一个现有的网站进行移动布局改造。该网站是建立在Wordpress Twenty11框架上的,所以我决定使用该框架中现有的媒体查询来构建移动布局。 现在,我的移动布局在任何宽度小于420px的桌面浏览器上看起来都很棒,但在iPhone和安卓移动浏览器上,它只需加载全宽网页即可。完整的网络体验,哇! 客户不满意。希望移动设计显示在所有iPhone浏览器上。因此,现在我需要弄清楚为什么移动浏览器坚持以整个桌面宽度显示页面,而完全忽略了移动CSS。 下面是我的媒体查询,位于主style.css文档的底部: @media (max-width: 800px) { /* Design start
浏览 1
提问于2012-07-11
得票数 3
回答已采纳
3
回答
Javascript移动设备宽度检查和类删除
javascript
、
jquery
、
css
、
width
、
removeclass
我需要从我的网站删除一些类,如果设备宽度低于1200像素(因为移动视图)。 我尝试使用Javascript,这个方法工作得很好: $(window).resize(function(){ var current_width = $(window).width(); if(current_width < 1200) $('a').removeClass("expand"); $( ".effects clearfix" ).remove(); $( ".overlay" ).remove(); $('#
浏览 3
提问于2015-06-14
得票数 0
1
回答
如何使用CSS媒体查询将背景图像缩放到查看窗口
css
、
mobile
、
mobile-safari
、
background-image
、
media-queries
我有一张大图作为一个网站的背景: body { background: #000 url(/assets/img/living.jpg) no-repeat center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:100%; } 但在我的移动设备(iPhone 4S -
浏览 1
提问于2013-03-29
得票数 7
回答已采纳
2
回答
隐藏特定页面上的div,其中jquery在移动设备上不起作用
jquery
、
html
、
css
、
mobile
我想隐藏我的画布(从链接),但只在特定的页面上,以便在必要时允许移动设备上的触摸滚动。因为媒体查询不是解决方案,所以我使用一个只与我的页面链接的jquery脚本来隐藏我的.canvas div: if ($(window).width() < 640) { $('.canvas').hide(); } else { $('.canvas').show(); } 它的工作“完美”时,调整大小和重新加载的窗口在火狐,safari和chrome…但在移动设备上,画布并未被隐藏。有什么想法吗? 顺便说一句,我使用了,并确保我的脚本: <script type
浏览 1
提问于2014-10-09
得票数 0
1
回答
菜单没有显示在移动或当页面被缩小
menus
我刚做了一个带有WordPress主题的idolcorp网站,但我注意到菜单没有显示在移动设备上,或者当我缩小页面大小时。 页面URL是www.ariss.com.ng
浏览 0
提问于2017-01-21
得票数 -1
3
回答
使用@media查询时,手机是否加载不相关的查询和图像?
css
、
mobile
、
page-load-time
如果我的CSS基于移动样式,然后对逐渐变大的显示器(平板电脑、台式机等)使用@media查询,那么移动设备会使用桌面样式吗? 我认为,通常情况下,移动设备将加载所有图像,即使它们不适用于自己的特定媒体大小。这意味着它将加载所有图像并隐藏与其基于查询的样式表不匹配的图像。 我想要做的是在这个网站的更大的版本中使用一个背景: .splash { background: #1a1a1a url('/assets/imageLarge.png') no-repeat; } 另一个是手机版的: .splash { background: #1a1a1a url('
浏览 3
提问于2013-05-21
得票数 40
回答已采纳
2
回答
Phonegap :如何控制手机的字体大小?
javascript
、
jquery
、
html
、
css
、
cordova
在Phonegap中,我遇到了这样的问题:如果我们将移动设备的字体大小从常规更改为大,那么应用于应用程序的css就会中断。 那么如何克服这个问题呢?我找了很多东西,但没有找到任何解决办法。 任何帮助或建议都是有帮助的。 当设备字体大小正常时,它可以正常工作。 当我将设备的字体大小从setting>Display>fonts更改为巨型时
浏览 5
提问于2015-03-04
得票数 8
回答已采纳
1
回答
上用于改变方向的火灾事件
mobile
、
opera
、
onresize
在移动设备上改变方向时,如何触发事件? 大尺寸在iPod触摸屏上工作得很好,但在使用Opera作为浏览器的移动设备上却不能工作。 任何关于如何在Opera手机上启动事件的帮助。 谢谢, 阿比希克·贾恩
浏览 1
提问于2011-05-27
得票数 3
1
回答
媒体对视频大小的查询不起作用?
javascript
、
html
、
css
、
flexbox
、
html5-video
我的html中有一个视频,css中的宽度设置为75%,我想在移动设备的媒体查询中将其设置为100%。但是,当我尝试将媒体中的宽度更改为100%时,发生了query...nothing。下面是它现在的样子:Image 我试着将宽度设置为100% (不是在媒体查询中),当我缩小它的大小时,它看起来就像我在移动设备上希望的那样,但在桌面大小上它也是100%的宽度,我不想这样。 所以总而言之,我希望它在桌面大小和任何东西上都保持75%的宽度。小于600px为100%宽度。 这是我的html:` <section id="game-video"> <
浏览 18
提问于2021-07-29
得票数 0
1
回答
媒体查询只在多个浏览器的响应模式下工作。
css
、
responsive-design
、
media-queries
、
bootstrap-4
我已经建立了我的网站使用引导4。有一些问题的反应设计,所以我使用媒体查询来解决这些问题。一直以来,我都在使用Chrome的设备工具栏对CSS进行更改。当使用设备工具栏时,一切看起来都像我想要的那样,但是当我在设备工具栏之外调整浏览器的大小时,媒体查询就不再工作了。我在Chrome和Firefox中都试过这一点。 我已经过早地让我的网站活下来,看看这个问题是否还会继续存在的时候,问题仍然存在。以前有人遇到过这种情况吗? 是网址。我将非常感谢任何反馈和见解。提前谢谢你。
浏览 2
提问于2017-11-20
得票数 0
回答已采纳
1
回答
三星设备onyl显示屏的响应式设计背景?
android
、
html
、
css
、
browser
我的设计有一个很大的问题,我针对移动设备进行了调整。 我在我的iPhone、iPad和Windows Phone上测试了它,因为我没有安卓设备,所以我无法在它们上测试它。但我让一个朋友在他的三星Galaxy S3上测试它,还找到了一个网站,你可以在三星Galaxy S5上测试它,我看到它在三星设备上看起来真的很奇怪。 你在屏幕上看到的只是一小部分背景,没有来自网站的div。 我还测试了许多视窗设置和CSS媒体查询设置,但在三星设备上都不起作用,在这一点上我不知道如何解决这个问题。 这是我的代码,如果你需要的话: meta name="viewport" content="
浏览 1
提问于2014-12-24
得票数 0
1
回答
数据筛选器无法以移动设备或平板电脑大小正确显示标签
html
、
css
、
tablet
、
responsive
、
smartphone
这是我的第一篇文章,所以请友善一点。我一直在努力让这个数据过滤器在移动和平板电脑格式下正常工作。 动态图片组织au / archive (很抱歉不能发布超过2个链接,图片对于解释问题很重要) 所有的东西在桌面上看起来都很完美,在chrome中调整大小,所有的东西都保持着它应该的样子,但是在移动设备上,当点击的时候,我得到的只是一个灰色的块。我已经确定了手机上出现的灰色方块是在我的layout.css中 .portfolio-wrapper { overflow:hidden; position: relative !important; background: #666; cu
浏览 0
提问于2017-05-05
得票数 0
1
回答
Html媒体查询为移动设备加载桌面样式表
html
、
css
、
media-queries
我的样式表有一个问题。一个是桌面版,另一个是移动版。当我在移动设备上时,我看到样式表已加载到网络选项卡中。 代码如下: 桌面: <link rel="stylesheet" href="app__desktop.css" type="text/css" media="screen and (min-width: 1024px)"> 移动性: <link rel="stylesheet" href="app__mobile.css" type="text/css" m
浏览 0
提问于2020-06-18
得票数 0
1
回答
当屏幕尺寸变化时更改元素
android
、
html
、
css
、
responsive-design
、
browserstack
我正在使用语义框架。我有两个导航菜单,一个用于桌面,另一个用于移动。我正在使用这个css: #mob { display: none; } @media (max-width: 960px) { #desktop { display: none; } #mob { display: inline-block; } 当我调整窗口的大小时,它在google上工作,但在我测试过的两个android设备上却不能工作。我还用ios7对其进行了浏览器堆栈测试,但没有结果。 我的直播网站在这里: 剩下的代码在这里: 任何建议都会很好。
浏览 2
提问于2014-04-20
得票数 0
回答已采纳
4
回答
我应该使用哪些CSS代码来获取我的网页来填充iPhone或Android上的屏幕?
android
、
iphone
、
html
、
css
、
rendering
下面有HTML代码。我已经将车身的宽度设置为640 is,这与iPhone的分辨率非常接近。然而,当我在iPhone或安卓上查看网页时,它就会像在我的网页浏览器中一样出现--只占屏幕的一部分。这篇文章太小了,不能用。 为了使文本在桌面浏览器中保持正常,但在移动设备上填充屏幕,我使用什么CSS代码?我读过一些关于使用device-width属性的内容,但我也无法让它们工作。我做错了什么? ,注意,,我不想让红色边框一直延伸到屏幕上(例如: body:width100%)。我只是不明白为什么iPhone没有缩放到一个设置成它应该具有的分辨率的区域。 HTML代码: <style>
浏览 2
提问于2011-11-14
得票数 3
回答已采纳
4
回答
如何使用切换功能添加的样式进行媒体查询
javascript
、
jquery
、
css
我有一个移动菜单,这是由js代码切换时,用户点击移动菜单图标。 我遇到的问题是:当屏幕从移动视图调整到大视图时,菜单仍然是打开的。 我使用媒体查询来隐藏大屏幕的移动菜单,但是似乎在元素上添加了display:block的切换方法,媒体查询不能覆盖它。 你用什么方法来解决这个问题?
浏览 37
提问于2016-05-27
得票数 0
回答已采纳
1
回答
为什么条目与响应性css代码堆叠?
css
、
responsiveness
我在一个网格中建立了一个投资组合页面。在正常大小的监视器和大多数移动设备上,响应性很好。在某些移动设备(Nexus6P,即)上,响应能力会中断,内容堆叠的大小会越来越小,比如俄罗斯娃娃。 编辑:经过大量的疑难解答和阅读其他问题,我认为这是与最初的设计师设置响应与em和px视口大小有关。这是正常的吗?我在下面添加了一个链接到屏幕截图和css文件,因为有很多不同的媒体查询会影响到这一点。 编辑:它只发生在一个非常小的窗口,似乎是40.063em和~<640px范围媒体查询重叠的地方。而且,在模拟器中进行复制也很困难,因为如果我先打开一个较小的视口,然后打开Nexus6P大小(或者宽度为641
浏览 1
提问于2017-08-02
得票数 0
1
回答
检查侧面负载的视窗宽度,如果小于X,则将类添加到主体
javascript
、
jquery
、
html
、
css
、
coffeescript
我目前正在建立一个投资组合网站,我想在移动设备上默认隐藏侧栏,因为它相当大的atm,你可以在这里查看它: www.dosh.dk/rofl/ 侧边栏将隐藏body是否具有类" sidebar -inactive“,因此我希望在加载站点时对视区进行一次检查,然后在X以下添加类 我使用的是coffeescript,我写了下面的代码,但它似乎不能工作,有什么想法吗? $ -> $(".inner_content").hide() $("#myskills").show() $("#site").addClass 'lo
浏览 2
提问于2015-01-12
得票数 0
1
回答
如何在HTML中绘制响应性'T‘形状
html
、
css
、
responsive
我正在进行一个项目,它需要在HTML中绘制类似于字母'T‘的东西,并使其响应。 --------IMG------------------------------------- | | | 我在交界处有个图像。我希望整件事都能有反应。 不幸的是,我不能共享代码,因为图表细节是专有的。 但我所面对的问题如下: 当我调整窗口的大小时,垂直线以与水平线不同的速度移动,因此垂直线不再在图像下面。 在我的CSS和HTML中我应该遵循什么样的策略来确保这是响应性的? 我是非常新的HTML,并有基本的知识,使图像响应等。 谢谢!
浏览 2
提问于2016-07-12
得票数 1
2
回答
CSS宽度在小屏幕上显示
html
、
css
、
width
当我在移动设备或小屏幕上访问时,我的容器宽度有一个显而易见的简单问题 我花了3个小时想知道为什么,但是……我找不到路。 这是url >> 你可以看到页眉,内容和页脚是如何通过ipad/iphone访问或在桌面上调整浏览器大小时受到限制的…我不需要响应,我只想在每个设备上完整显示设计!
浏览 1
提问于2013-03-14
得票数 0
1
回答
使用vh的iframe在移动和桌面之间的高度不一样
css
、
iframe
、
colorbox
在上,iframe的样式如下: iframe {width:100vw;height:84.5vh;} @media screen and (min-width: 600px) and (max-width: 999px) { iframe {width:100vw;height:81.5vh;} } @media screen and (min-width: 1000px) { iframe {width:100vw;height:77.5vh;} } 用于显示更大版本的图像。我假设Colorbox将图像定位在窗口的中间。彩色盒在桌面上工作得很好,但在移动设备上,对于i
浏览 0
提问于2016-11-08
得票数 1
3
回答
如何将不同的CSS应用于移动设备,而不仅仅是基于媒体的宽度/高度
android
、
html
、
ios
、
css
、
mobile
我想为某些元素显示不同的CSS样式,仅适用于移动设备、手机和平板电脑,但是不同宽度的媒体查询不能很好地工作,因为假设我的手机和我的17英寸笔记本电脑都有相同的全高清分辨率,而现代平板电脑的分辨率比大多数桌面显示器都大…… 因此,我想将CSS样式应用于android、iphone/ipad、黑莓、windows移动设备(即手机/平板电脑)。 有什么办法吗?
浏览 8
提问于2013-11-06
得票数 2
回答已采纳
2
回答
响应Web设计与用户代理嗅探
web-development
、
javascript
、
css
CSS3 media查询功能为开发适合许多不同屏幕大小和设备的网站带来了许多有趣的可能性。 然而,在实践中,我开始感觉到CSS3 media查询功能和整个“响应性网页设计”运动可能无法实现它的承诺。 我看到的问题是,最终,web开发人员主要关心的是他们的用户是通过桌面、平板电脑还是移动设备来查看内容。但是CSS3只提供了一种检测屏幕分辨率的方法。从理论上讲,检测屏幕分辨率似乎是对不同设备进行调整的一个很好的方法。但实际上..。 假设我们有一个简单的Javascript函数,它只输出屏幕宽度: function foo() { alert(screen.width); } 在我的黑莓触摸上
浏览 0
提问于2013-05-24
得票数 12
2
回答
iOS/mobile Safari是否为其字体调整控件提供了javascript事件或媒体查询?
javascript
、
ios
、
css
、
safari
、
responsive-design
I样式的响应式网站使用js来确定字体大小,然后应用css使用的类进行各种布局调整。简而言之,我的js检测环绕在文本字符周围的span的大小调整。最新版本的移动Safari提供了一个字体大小调整控件,它的缩放机制不会触发我的检测js。关于我可以用来检测移动Safari字体大小的事件或其他更改,有什么想法吗?也许是一个css媒体查询?我尝试了一个基于js intersectionobserver的解决方案:在桌面上工作,而不是在移动设备上工作:-(
浏览 2
提问于2019-10-10
得票数 0
2
回答
为什么这个柔性盒页脚不能在移动设备上工作?
html
、
css
、
mobile
、
flexbox
、
footer
我在练习用柔性盒来制作脚。我目前正在构建的页脚可以在桌面上正常工作,而不是在移动设备上工作。 这里是: 当我调整桌面上的页脚大小时,这个媒体查询可以工作,并且从列布局到行的转换是不稳定的: @media (min-width: 850px) { .footer { display: flex; padding: 10px; flex-flow: row; } 但是,如果在移动设备上检查页脚内容,则页脚内容将保持为一行。我不明白它为什么要这么做。在移动设备上,页脚应该位于列中,因为850 to下的屏幕将运行原始的flex流,该flex流设置为列布局: .footer { display: f
浏览 3
提问于2016-10-26
得票数 2
回答已采纳
1
回答
Chrome dev工具支持媒体查询,但浏览器不支持媒体查询
google-chrome
、
responsive-design
、
developer-tools
我在css文件中设置了从0-500 so和501-1250 so设置的媒体查询,等等。 当我在“模拟移动”选项卡中“模拟移动”时,我的CSS断点在Chrome工具中的屏幕模拟器中工作得很好。如果这是未选中的,或者当我在浏览器中查看它而没有打开dev工具时,它就不尊重断点。 在Firefox的"Responsive“中,断点也可以正常工作,但当我关闭开发工具时,在常规浏览器中就不能正常工作了。 我不知道如何最好地问这个问题 下面是我屏幕上演示这个问题的视频:
浏览 3
提问于2016-01-18
得票数 0
回答已采纳
1
回答
CSS /媒体查询
html
、
css
、
mailchimp
我已经使用Mailchimp的1-column模板创建了一个电子邮件邀请。 但是,当我导出HTML时,使用Mailchimp的CSS内联工具呈现它,并向我的电子邮件发送一个test blast。 它在Outlook上看起来没问题,但在Gmail App上不能正确显示。我知道在Gmail App上,它不支持媒体查询。 我可以知道除了调整媒体查询之外,还有什么其他方法可以让我的模板对移动设备友好吗?
浏览 2
提问于2015-06-17
得票数 3
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
番外篇——①浏览器兼容
2020 年响应式 Web 设计备忘清单
HTML5 移动页面自适应手机屏幕四类方法
前端 viewport 学习笔记
Google广告由于“目标网址无效”被拒登?
活动推荐
运营活动
广告
关闭
领券