Angular:使用媒体查询动态改变图像(纵向/横向)？

文章/答案/技术大牛

发布

0回答

javascript、css、angularjs、sass、media-queries

我正在尝试根据设备是纵向还是横向来更改图像。通常我会使用媒体查询，但我需要替换的两个图像是动态的，并存储在一个配置文件中。我想知道，有了Angular，是否有可能插入媒体查询，并根据方向动态更改图像？我也在使用SASS，但我仍然看不到通过代码实现这一点的方法。

浏览 6提问于2016-07-18得票数 1

1回答

自动屏幕方向不工作一个用户服务屏幕方向安卓

android、eclipse、video、media-player

我已经创建了一个自定义媒体player.In，其中有一个横向和纵向模式的按钮。当播放器打开媒体播放器，它的所有功能工程fine.But点击全屏按钮，我将媒体播放器设置为横向模式。单击此按钮后，自动屏幕方向不起作用，只有用户可以通过单击按钮(更改横向/纵向按钮)更改方向。有没有什么方法可以同时使用按钮(改变横向/纵向的按钮)自动调整屏幕方向？谢谢。

浏览 1提问于2013-08-05得票数 0

2回答

如何在更改方向后重新加载CSS文件(手机)？

css、mobile、screen-orientation

对于我网站上的图库，我使用媒体查询来根据屏幕宽度重新调整图像大小(我使用galleria的对开主题)，当你倾斜手机时，图像大小应该会改变-但这只有在你手动重新加载之后才会发生。(添加方向、横向或纵向不起任何作用)。非常感谢！

浏览 2提问于2013-05-04得票数 1

2回答

我们如何确定移动网站的图片大小？

css、image、html、mobile

如何将相同的图像调整为iphone纵向和横向模式以及ipad纵向和横向模式？我有一个网站，它是320px的宽度和标题图像也是320px，所以当我看到这个网站在横向模式，它看起来更小，在ipad它甚至更小，所以我怎么才能修复它为相同的宽度的设备。我使用媒体查询来做到这一点，并根据设备宽度固定图像宽度，例如:对于ipad，我将图像大小写为780px，对于移动环境，图像

浏览 0提问于2012-06-18得票数 3

回答已采纳

2回答

如何在纵向和横向模式下为UI移动布局制作设计css

html、css、user-interface、ionic-framework、bootstrap-4

*注意：-红色为背景-蓝色为图像如何在移动视图中使用CSS/Bootstrap或其他工具编写从纵向模式到横向模式的UI代码，我正在使用ionic进行开发。

浏览 0提问于2017-05-31得票数 0

2回答

css媒体查询max-device-width

css、media-queries

如果我用css 3媒体查询max- device -width，当设备的方向改变时，这个值会改变吗？例如，如果iPhone从纵向移动到横向，最大设备宽度是否会发生变化？

浏览 2提问于2012-12-27得票数 1

回答已采纳

1回答

IPhone4和iPhone5s的媒体查询未轮换更新

css、media-queries、viewport、iphone-4

当我在纵向和横向之间旋转iPhone 4和iPhone 5s时，媒体查询中的CSSs没有更新。由于我在媒体查询css中使用了视窗测量，vw和vh，我希望它们可以在纵向和横向之间旋转-它们在除了iPhone 4和iPhone 5s之外的所有手机上都工作得很好。640px)...{ margin: 0 0 0 0;... 当我

浏览 5提问于2015-03-17得票数 1

4回答

不使用媒体查询的Css图像处理

html、css

谁可以让我知道如何处理图像的大小(宽度和高度)在所有的方式，如纵向和横向的笔记本电脑，个人电脑，ipad和移动屏幕的看法。但是不使用媒体查询。有一次我会得到较大的图像，而另一次我会得到较小的图像，但我想只使用普通的css显示相同大小的所有图像，而不使用任何媒体查询。请做必要的事情。

浏览 0提问于2012-07-18得票数 2

回答已采纳

3回答

尝试让大的居中背景图像在移动浏览器中工作，而不会失真

html、css、google-chrome、mobile

所以我在本文中使用了这个方法：css：height: auto;min-height: 100%;position

浏览 0提问于2013-10-31得票数 0

2回答

css扩展基于纵向或横向屏幕大小？

css、mobile、landscape、portrait

我想要的是当你在肖像模式下看它的时候，它的宽度是100px，在横向模式下，比如说200px。实际上，在移动设备上观看会发生这种情况。所以div在横向模式下会扩展，在纵向模式下会缩小一点。

浏览 0提问于2010-10-05得票数 21

回答已采纳

2回答

调整布局以适应屏幕方向的变化

responsive-design

当移动设备的方向改变时，我对移动设备如何处理屏幕分辨率的变化感到困惑。如果我创建两个媒体查询-一个是320 (纵向)，另一个是480 (横向)，iphone只加载320版本，而不考虑方向，并且只是缩放以充满屏幕。当iphone加载到横向位置时，或者当iphone从纵向倾斜到横向时，有没有一种方法来传递新的480样式？

浏览 2提问于2012-11-22得票数 0

1回答

Google Pixel C设备UI未更改为基于CSS选择器的landcape模式

css、sass

我正在为一个混合应用程序工作，发现"Google Pixel C“设备，在纵向模式下显示的UI与横向模式相同，尽管CSS选择器用于更改。我正在使用cordova框架进行开发。当设备处于横向模式时，我将横向类应用于body标签，并在设备处于纵向模式时删除该类。用于展示横向模式的媒体查询如下所示： body.landscape #Login #L

浏览 16提问于2016-08-01得票数 0

1回答

Android- Media player在屏幕方向时停止

android、android-layout、android-screen-support

我正在使用Android媒体播放器开发应用程序。当屏幕转到横向模式时，媒体播放器停止。所以，我用了<activity>内幕现在解决了媒体播放器的停机问题，但屏幕没有改变为( layout在横向和纵向模式中，都出现了相同的横向布局。请给我指路

浏览 2提问于2013-04-25得票数 1

2回答

用于纵向显示的缩放移动响应式景观布局

javascript、css、html、mobile、responsive-design

我有一个响应式网页布局设计为移动横向显示(480px)的想法，并希望使用相同的移动纵向显示(320px)的移动横向布局。有没有人能想出一种方法来缩小这个视图，让它也可以显示( 320px )，而不需要添加另一个专门针对320px显示的css媒体查询？

浏览 0提问于2013-01-25得票数 0

1回答

Screen.width/ $(窗口).width()媒体查询

html、css、media-queries

因此，在移动设备中，媒体查询似乎使用screen.width，它根本不会改变。但是在我的桌面上，当我改变窗口大小时，screen.width保持不变，$(window).width()改变，并且应用了适当的样式表。因此，在桌面浏览器中，媒体查询使用$(window).width()，这让我感到困惑。代码示例我的媒体查询 @media only screen and (max-width: 1050p

浏览 1提问于2013-11-27得票数 0

3回答

CSS媒体查询未检测到方向更改

css、cordova、orientation、media-queries

我正在使用Cordova制作一个混合应用程序。我的css文件中有以下媒体查询 /*css goes here*/类似地，媒体查询纵向和<e

浏览 1提问于2014-02-02得票数 3

1回答

如何在智能手机上缩小平板电脑的网站构建？

iphone、ios、ipad、zooming、viewport

我为1024x768开发了一个网站，并使用了以下视窗：它在台式机和平板电脑上看起来很棒

浏览 0提问于2012-04-03得票数 1

回答已采纳

3回答

响应式菜单媒体查询

css、html、drop-down-menu

我真的很难做一个移动菜单。有人能帮我写代码吗？我试的时候真的搞得一团糟css可以在下面找到： font-size: 62.5%;} /* section width 100 (0 BM) + clearfix */ min-width: 430px; background-color: #000; }

浏览 0提问于2015-01-06得票数 0

1回答

样式在打印过程中变得混乱

html、css、media-queries

我正在使用一个应用程序来打印纵向和横向模式的页面together.some页面打印在纵向和一些是在landscape.Printing的页面无论是纵向或横向外观good.But打印纵向和横向的页面在一起，使纵向页面拥堵。这是我使用的媒体查询， @media print { max-width: none; width:100%

浏览 15提问于2019-03-15得票数 0

12回答