媒体查询不适用于离子项目
GY22
我正在使用电影数据库中的api进行离子项目
从图像中可以看到，我有一个海报封面网格。在iPhone 5（使用CSS对其进行了调整）和iPhone 6Plus上，您可以看到网格居中。但是在iPhone 6上，它的功能有些不足。
它尝试通过媒体查询来解决此问题，但是如果我进行更改，那么iPhone 5和iPhone 6Plus的网格也会更改。
我的问题是如何在不弄乱iPhone 5和iPhone 6Plus布局的情况下，仅调整iPhone 6的布局。
我的HTML代码的一部分：
<div class="row responsive-sm responsive-md responsive-lg wrapper-grid">
<div class="col col-33">
<div class="">
<a ng-repeat="trending_movie in trending_movies" href="#/app/trending/{{trending_movie.id}}">
<img ng-if="trending_movie.poster_path" ng-src="http://image.tmdb.org/t/p/w92/{{trending_movie.poster_path}}" >
<img ng-if="!trending_movie.poster_path" ng-src="{{default_image}}">
</a>
</div>
</div>
</div>
我的CSS代码的一部分：
/* GRID PAGE */
.wrapper-grid{
padding-left:15px;
}
/* MEDIA QUERIES */
/*@media(max-width:750px) and (max-height:1334px){
.wrapper-grid{
padding-left:40px !important;
}
}
*/
维克多·露娜
我可以建议使用宽度介于iPhone 5和iPhone 6Plus之间的媒体查询：
@media (max-width:413px) and (min-width:321px) {
}
这将改变您的CSS在此值之间的大小。当浏览器的宽度在413px和321px之间时，将应用媒体查询中的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
git add命令不适用于离子项目
- 2
app.js中的控制器不适用于离子项目
- 3
CSS媒体查询不适用于Android设备
- 4
媒体查询不适用于ie和电话
- 5
媒体查询打印不适用于javascript命令
- 6
浮动：无不适用于媒体查询
- 7
媒体查询不适用于VueJS样式标签
- 8
媒体查询不适用于Safari
- 9
媒体查询打印不适用于javascript命令
- 10
浮动：无不适用于媒体查询
- 11
媒体查询不适用于较小的屏幕尺寸
- 12
CSS媒体查询不适用于Samsung Galaxy
- 13
媒体查询不适用于中等范围
- 14
表格显示块不适用于媒体查询
- 15
属性显示不适用于媒体查询
- 16
媒体查询适用于Chrome，但不适用于移动设备
- 17
媒体查询适用于手机，但不适用于平板电脑
- 18
媒体查询不适用于某些类的Bootstrap，但适用于其他类
- 19
媒体查询不适用于手机，但响应性适用于桌面
- 20
CSS媒体查询不适用于Iphone（Chrome和Safari）/ Apple MBP Safari
- 21
我的LESS数学运算不适用于我的媒体查询定义
- 22
显示后，媒体查询中的浮动内容不适用于输入：
- 23
媒体查询不适用于CSS网格布局
- 24
媒体查询不适用于iPhone Safari浏览器
- 25
CSS中的媒体查询不适用于其他宽度
- 26
媒体查询不适用于浏览器或移动设备
- 27
聚合物铁媒体查询不适用于 dom-repeat 元素
- 28
我的媒体查询不适用于 google chrome 和 firefox
- 29
响应式网站不适用于 Css 中的媒体查询
我来说两句