我尝试使用@media为网站设置两种不同的样式。但无论我使用手机还是电脑,它总是会加载桌面视图。
/* desktop screen */
@media (min-width: 801px){
content desktop
}
/* mobile screen */
@media (max-width: 800px){
content mobile
}
我做错了什么?
(完整的CSS位于olli.ml)
答案 0 :(得分:1)
您问题的实际答案是:您使用width
和device-width
错误。改变第169行:
@media (max-device-width: 800px){
为:
@media (max-width: 800px){
如果您想专门定位手机,最好查看常用框架(如bootstrap或foundation)使用的媒体查询。您会发现许多广告的目标尺寸要小得多,例如320px
或480px
,而不是代码中的800px
。
答案 1 :(得分:0)
问题是CSS媒体查询区分功能而不是设备。因此,您可以尝试确定哪些功能与您要引用的设备相对应。在this site中,您有针对iPhone,iPad的媒体查询。例如:
iPhone 6的肖像和放大器景观:
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
这些查询尝试使用其功能减少使用特定设备的情况。在this site中,您有一组针对特定设备的预定义查询。
但请注意the difference between Desktop and Mobile可能不那么明显。
答案 2 :(得分:-1)
并且不要忘记将meta添加到<head></head>
<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />