我有 2 个 CSS 文件,1 个用于移动设备,1 个用于计算机、笔记本电脑...... 见下文:
http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css http://www.townhouseistanbul.com/skin/kevintimmer/css/large.css
是否可以只在移动设备上加载 tablet.css,而不是当用户在计算机上缩小屏幕时。
下面的代码对我不起作用:
<link rel="stylesheet" href="http://www.townhouseistanbul.com/skin/kevintimmer/css/large.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css" type="text/css" media="handheld" />
有什么想法吗?
谢谢!
最佳答案
试试这个
<link id="stylesheet-tablet" media="(min-width: 480px) and (max-width: 979px)" href="tablet.css" type="text/css" rel="stylesheet">
<link id="stylesheet-mobile" media="(min-width: 0px) and (max-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet">
并使用这个元标记
<meta name="viewport" content="width=device-width, height=device-height" />
关于html - 2 个 CSS 文件,1 个用于移动设备,1 个用于计算机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21349054/