0

私は html のブロックを持っていtileます。画面が広い場合は、タイルを横一列に並べます。ただし、画面の幅が 2 タイル未満の場合は、ページの下に配置します。

タイルの内側には、画像といくつかのテキストがあります。タイルがページ全体に表示されると、画像がテキストの上に表示されます。しかし、一列にタイルが 1 つしかない場合、画像はテキストの左側に表示されます。

たぶん、あなたはまだ私と一緒にいます。両方のレイアウトに同じ 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クラスを使用しようとしていますが、私の試みでは常に、「visible-phone」クラスと「hidden-phone」クラスの 2 つのバージョンの 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 のメディア クエリはほとんどのスマートフォンに対応しているため、通常はそのために 2 つの別々のスマートフォンを用意する必要はありません。これが私が通常使用するものです：

/* 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 スタイルでモバイル Web ページを作成するから)

于 2013-09-11T23:30:43.873 に答える