如何更改手机和桌面的 css 样式? [英] How to change the css style for phone and desktop?

问题描述

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

I've got a block of html, let's call it a tile. When the screen is wide we lay down tiles horizontally in rows. But when the screen is less than two tiles wide we lay them down the page.

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

Inside the tiles are an image and some text. When the tiles are going across the page the image should show above the text. But when there is only one tile in a row the image should show to the left of the text.

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

Perhaps you're still with me. I'm trying to work out how to use the same html for both layouts and apply the left/top positioning of the image purely with css. The tile html looks like this:

<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"类.这真的有必要吗?

The sass/css has gone through a number of variations. I've been trying to use visible-phone class but my attempts always wind up needing to output two versions of the html, one with "visible-phone" class and another "hidden-phone" class. Is this really necessary?

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

Is it not possible to declare a default css class (for desktop) and an alternate which automatically applies to phone?

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

(@media?)

推荐答案

以下是标准设备的媒体查询(来自 CSS-Tricks.com):

Here are the media queries of standard devices (from 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 组件的地方.

All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.

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

**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:

/* 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 创建移动网页风格)

这篇关于如何更改手机和桌面的 css 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！