0

我有一个 html 块，我们称它为tile. 当屏幕很宽时，我们将瓷砖水平放置成行。但是当屏幕宽度小于两格时，我们将它们放在页面上。

瓷砖里面是一张图片和一些文字。当瓷砖穿过页面时，图像应显示在文本上方。但是当一行中只有一个图块时，图像应该显示在文本的左侧。

也许你还在我身边。我正在尝试研究如何对两种布局使用相同的 html，并纯粹使用 css 应用图像的左/上定位。平铺 html 如下所示：

<li class="car-item">
  <img src="{{car_image}}" class="img-rounded">
  <h3>{{name}}</h3>
  <ul>
    <li class="ico-body">{{body}}</li>
    <li class="ico-petrol">{{cylinder}}</li>
    <li class="ico-transmission">{{transmission}}</li>
  </ul>
</li>

sass/css 经历了许多变化。我一直在尝试使用visible-phone类，但我的尝试总是需要输出两个版本的 html，一个是“可见电话”类，另一个是“隐藏电话”类。这真的有必要吗？

是否不可能声明一个默认的 css 类（用于桌面）和一个自动应用于手机的替代品？

.visible-phone
  height: none
  margin-right: 10px
  img
    float: left

（@媒体？）

4

1 回答 1

6

以下是标准设备的媒体查询（来自 CSS-Tricks.com）：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

所有显示 /* Styles */ 的区域都是您为所支持的不同设备放置单独 CSS 组件的地方。

**请注意：这是一个非常复杂的媒体查询表。我通常会删除横向的东西，而 iPhone 媒体查询会处理大多数智能手机，因此通常不需要为此设置两个单独的查询。这是我通常使用的：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

（以及来自创建具有不同 css 样式的移动网页）

于 2013-09-11T23:30:43.873 回答