我试图让我的敏感CSS样式只能在平板电脑和智能手机上工作.基本上我有一个桌面风格,一个手机风格：人像和一个风格的手机：景观.我不希望移动风格干扰桌面演示.我已经玩了无数的媒体查询,但结果是移动样式被显示在桌面上,或者移动样式仅在移动设备上显示,但仅显示一组规则(无响应).有没有办法让两个人完全分开？
我现在的代码如下：
/* 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 */
解决方法
你有什么工作应该很好,但是没有实际的“移动/平板电脑”媒体查询,所以你总是会被卡住.
有media queries for common breakpoints,但随着设备的不断变化,他们不能保证向前移动.
这个想法是,您的网站在所有尺寸上都保持相同的品牌,因此您应该希望样式跨越断点进行级联,只能更新宽度和定位以最适合该视口.
为了进一步解决上述情况,使用Modernizr进行无接触测试将允许您定位最有可能是平板电脑和智能手机的触摸设备,但是新版本的触摸屏幕并不像以前那样好.
