jquery - 使用 jQuery 和 CSS 进行响应式设计

Question

我有一个网站，我在其中通过 jQuery 为元素设置动画。我的问题是，如果您正在访问 iPad，是否可以通过某种方式调用特定功能文件以获得给定的分辨率。在我的脑海中，我已经尝试过，但无论显示器的大小如何，都会更改整个页面的功能。

一般功能。

<script type="text/javascript" src="js/funcionesSobre.js"></script>

具体功能。

<link rel="stylesheet" type="text/css" href="css/iPadPortrait.css" media="only screen and (max-width : 768px) and (orientation : portrait)" />

<script type="text/javascript" src="js/funcionesPortrait.js" media="only screen and (max-width : 768px) and (orientation : portrait)"></script>

你可以通过 jQuery 来调整设计还是只能用 CSS 来制作？

Answer 1

有matchMedia和MediaQueryList接口：

var mql = window.matchMedia('(min-width:769px)');
// window.matchMedia returns a MediaQueryList object

mql.matches // returns true if the document currently matches the mediaQuery

if(mql.matches) {
    // viewport is at least 769px
}
else {
    // viewport is 768px max
}

或者您可以将侦听器添加到 MediaQueryList 对象：

var media = window.matchMedia('(max-width:400px)');
media.addListener(handleMediaChange);

function handleMediaChange(mql) {
    if(mql.matches) {
        // viewport is 400px max
    }
    else {
        // viewport is 401px or more
    }
}

兼容性

• 铬 9+
• 火狐 6+
• Safari 5.1+
• 歌剧 12.1+
• 互联网浏览器 10+
• Safari 移动版 5+
• 安卓 3+

文档

• 查看MDN 文档的matchMedia和MediaQueryList
• 有关 polyfill ，请参阅github.com/paulirish/matchMedia.js
• 有关兼容性表，请参见caniuse

Answer 2

响应 JS 可能适合您的需求。

http://responsejs.com/