css - 如何更改手机和桌面的CSS样式？

Question

我有一个 html block ，我们称它为 tile。当屏幕很宽时，我们水平地成排放置瓷砖。但是当屏幕宽度小于两 block 时，我们将它们放在页面下方。

图 block 内部是图像和一些文本。当图 block 穿过页面时，图像应显示在文本上方。但是当一行中只有一个图 block 时，图像应该显示在文本的左侧。

也许你还在我身边。我正在尝试找出如何对两种布局使用相同的 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，一个带有“visible-phone”类，另一个带有“hidden-phone”类。这真的有必要吗？

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

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

(@媒体？)

Answer 1

以下是标准设备的媒体查询(来自 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 */
}

(来自Creating a mobile web page with different css style)