Как изменить стиль css для телефона и рабочего стола?

Question

У меня есть блок 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 

(@media?)

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 */ 
} 

Все из областей, которые говорят/* Стили * /, где вы размещаете отдельные компоненты CSS для различных устройств, которые вы поддерживаете.

** ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: это довольно сложный лист запросов СМИ. Обычно я удаляю материал ландшафта, а запрос на iPhone для 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)