如何仅将样式应用于移动设备？

我正在创建新的网站。我的目的是为桌面和移动设备创建一个页面，并根据设备（手机或台式机）设置样式。我知道我可以用纯JavaScript实现一切，但我也想使用CSS和媒体查询。我的问题是：如何才能为使用CSS媒体查询的移动设备设置样式？我试图使用：如何仅将样式应用于移动设备？

@media only screen{ 
    style... 
}

但它适用于移动和dekstop浏览器。

来源

2015-06-01 Shagohad

有一个 “移动设备” 和 “桌面” 之间没有严格的区分。有坞站和外接显示器的平板电脑可以同时使用，也可以同时使用两者。相反，您应该确定设备的特征，例如您想要针对特定格式设置的屏幕大小，然后使用['@ media'指令]（https://developer.mozilla.org/en-US/docs/Web/指南/ CSS/Media_queries）来定位这些特定的屏幕尺寸。 – jfriend00

没有确切的方法只针对移动设备，但正如其他人所说，你可以依靠屏幕宽度。有一点需要记住，媒体类型“屏幕”专用于彩色计算机屏幕，“手持”专用于手持设备。虽然这不会单独用于定位移动设备;你仍然需要包含规则。 [有关媒体类型的更多信息]（http://www.w3.org/TR/CSS21/media.html）。 – chRyNaN

您是否尝试过根据屏幕大小而不是设备设置您的样式？

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

来源

2015-06-01 17:23:44

是的，我正在尝试。 – Shagohad

你不能简单地针对移动，但必须给破发点，以便为它工作。你将不得不使用最小宽度或最大宽度为工作

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

举例：这将隐藏带班侧边栏DIV，并设置容器宽度为100％，在较小的屏幕

@media only screen and (max-width : 321px) { 
     .sidebar { 
       display:none; 
     } 

     .container{ 
      width:100%; 
      } 

    }

来源

2015-06-01 17:23:46 Nakib

我知道，我也在尝试，但这仍然适用于桌面和手机。 – Shagohad

所以你想在桌面屏幕上显示 – Nakib

@Shagohad检查我的编辑 – Nakib

如果样式，甚至内容完全不同，从移动到桌面，使用像Bootstrap这样的框架使得这非常容易。您可以使用自己的媒体查询创建hidden-xs和visible-xs类，并将这些类应用于不同的div。不是DRYest的做法，而是完成工作。

@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 
    
 
    .hidden-xs { 
 
     display: none; 
 
    } 
 
    
 
    .visible-xs { 
 
     display: block; 
 
    } 
 
    
 
}

来源

2015-06-01 17:35:17

如何仅将样式应用于移动设备？

回答

相关问题