html - 2 个 CSS 文件,1 个用于移动设备,1 个用于计算机

标签 html css mobile

我有 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/

相关文章:

css - IE9 css 没有正确对齐菜单

css - Chrome 版本 58.0.3000.4 dev(64 位)CSS 渲染问题

javascript - 自定义应用程序启动屏幕

javascript - Swipebox - 单独打开图像而不是画廊

Javascript 功能在我的正则表达式上无法正常工作

javascript - 当用户单击页面上的任意位置一次时打开新选项卡

javascript - 使用 Enter 键访问 HTML 中的提交按钮

javascript - 为什么切换图像时我的幻灯片显示在菜单上方?

javascript - 检查是否支持 <a href ="tel:5555555">

jquery - Select2 插件 : Showing selected options outside the form element