首页 文章

仅限移动设备上的响应式CSS样式

提问于
浏览 次
17

我正在尝试让我的响应式CSS样式在平板电脑和智能手机上运行 only . 基本上我有桌面风格，移动风格：肖像和移动风格：风景 . 我不希望移动样式干扰桌面演示 . 我玩过无数媒体查询，但结果是移动样式显示在桌面上，或者移动样式仅在移动设备上显示，但只有一组规则（无响应） . 有没有办法让两者完全分开？

我现在的代码是这样的：

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */
css responsive-design media-queries

4 回答

  • 1

    你有什么应该可以工作，但没有真正的“移动/平板电脑”媒体查询，所以你总是会陷入困境 .

    有media queries for common breakpoints，但随着设备范围的变化，它们无法保证向前移动 .

    我们的想法是，您的网站在所有尺寸上都保持相同的品牌，因此您应该希望样式在断点之间级联，并且只更新宽度和位置以最适合该视口 .

    为了进一步解决上述问题，使用带有无触摸测试功能的Modernizr，您可以将触摸设备定位到最有可能是平板电脑和智能手机的设备上，但是新版本的触摸式屏幕不像以前那么好用 . .

    回复于
  • 8

    为什么不使用媒体查询范围 .

    我正在为我的雇主制作响应式布局，我正在使用的范围如下：

    你有主要的桌面样式在CSS文件的主体（1024px及以上），然后我正在使用的特定屏幕尺寸：

    @media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

    这将涵盖几乎所有正在使用的设备 - 我将专注于使样式在范围的末端（即320,480,568,768,800,1024）正确，正如所有其他设备一样响应可用的大小 .

    另外，不要在任何地方使用px - 使用em或％ .

    回复于
  • 4

    是的，这可以通过javascript功能检测（或浏览器检测，例如Modernizr）来完成 . 然后，使用yepnope.js加载所需的资源（JS和/或CSS）

    回复于
  • 17

    我不得不解决类似的问题 - 我希望某些样式仅适用于横向模式的移动设备 . 基本上，字体和行间距在每个其他上下文中看起来都很好，所以我只需要移动版本的一个例外 . 这个媒体查询工作得很好：

    @media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}
    回复于

相关问题