当前位置：文江博客话题详情

使用媒体查询进行移动设计的最佳方式

发布于 2024-12-03 22:44:04 字数 768 浏览 1 评论 0原文

我知道什么是媒体查询以及为什么使用它们，但我不确定使用它们开发移动网站的最佳方法是什么。

示例：我有 mysite.com，它有一个包含所有必要样式的样式表（假设它是一个相当大的文件）。目前，我的任何样式都不针对较低的屏幕分辨率或其他设备。

然后我决定制作我的网站的移动版本。为了简单起见，我现在只针对 iPhone 用户，如果代码检测到有人通过 iPhone 访问我的网站，他们就会获得移动版本。

我的问题：包含这些额外样式的最佳位置在哪里，以便用户看到移动版本？我应该将这些样式包含在原始样式表中，还是将它们分离到自己的样式表中会更好？

假设我的网站完全是用浮动构建的，但我的移动版本只会显示每个元素堆叠在一起。如何使用媒体查询来显示这一点？就像声明 float:none; 一样简单吗？或者什么？

基本上，我在上面的段落中想问的是，如何构建我的样式表，以便例如基本颜色和链接位置或其他内容在移动版本中与桌面版本中一样保留，但有差异例如在移动版本中将所有内容堆叠在一起？

样式表的媒体查询部分中的规则是否基本上“覆盖”了您在非媒体查询部分中声明的内容？

我发现了许多使用媒体查询的示例，但我找不到一个完整站点的工作示例。如果我在同一个 HTML 页面中链接了 mobile.css 和 main.css，它们如何协同工作以在移动版本中保留我网站的某些方面，但更改其他方面？

最后一个问题：是否可以采用完全固定宽度的设计，但仍使用媒体查询？该代码仍然能够检测浏览器何时缩小或扩展超过一定的宽度/高度，对吗？

很抱歉问了这个又长又可能令人困惑的问题。我希望你能告诉我我想问什么。

原文

I know what media queries are and why they are used, but I'm not sure on how the best way to develop a mobile site with them are.

Example: I have mysite.com that has a style sheet with all the necessary styles (let's say it's a pretty big file). At this point, none of my styles target lower screen resolutions or other devices.

I then decide to make a mobile version of my site. To make it easy, I'll target only iPhone users for now, and if the code detects someone visits my site on an iPhone, they get the mobile version.

My question(s): Where is the best place to include these extra styles, so that a user sees the mobile version? Should I include these styles in the original style sheet, or would it better if I separate them out into their own style sheet?

Say that my site is built entirely with floats, but my mobile version will just show every element stacked on top of each other. How do I show that using media queries? Is it as simple as declaring float:none; or something?

Basically, what I'm trying to ask in the paragraph above is, how do I construct my style sheet so that, for example, the basic colors and maybe link positions or whatever persist in the mobile version as in the desktop version but with differences such as stacking everything on top of each other in the mobile version?

Are the rules in the media query section of a style sheet basically 'over-riding' what you've declared in the non media query sections?

I've found many examples of using media queries, but I can't find one working example of a full site. If I have a mobile.css and main.css linked in the same HTML page, how do they work together to retain some aspects of my site in the mobile version but change others?

Last question: is it possible to have an entirely fixed-width design, but still use media queries? The code will still be able to detect when the browser shrinks or expands past a certain width/height, correct?

Sorry for the long and probably confusing question. I hope you can tell what I'm trying to ask.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诗化ㄋ丶相逢 2024-12-10 22:44:04

有（至少！）四种方法可以做到这一点：

普通 CSS，在底部使用媒体查询（因此它们会覆盖上面的 CSS）
在链接元素上使用媒体查询加载两个（或更多）CSS 文件
服务器端检测添加HTML
服务器端检测中的不同 CSS 链接，然后重定向到 m.example.com 或 example.com/mobile

如果您正在谈论微小的更改（浮动：无、不同的字体大小等），那么我会选择 1。
如果 CSS 有很多很多的更改，我会使用 2 或 3（3 不太好，因为您依赖于用户代理，而不是屏幕属性）。如果 HTML 和 CSS 发生变化，我会使用 4。

对于所有这些，请检查您在 Internet Explorer 6 - 8 中的工作，如果您使用 1，它们可能会忽略媒体查询并使用所有 CSS，包括移动位

。查看 http://mediaqueri.es/，了解使用 1 和 2 的网站的一些示例。

以下是另一个可能有帮助的资源：https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

回复收藏 0 原文

梦萦几度 2024-12-10 22:44:04

我建议根本不要浪费时间进行移动浏览器/设备检测；这就是媒体查询的优势所在。更有机地思考，而不必不断地使用新设备和移动浏览器更新您的网站，只需使用一个 CSS 文件，并利用 CSS3 的最大宽度/最大设备宽度。

将放在标头中，然后在 CSS 文件中将其解析为桌面版本和移动版本：

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

I would suggest not fooling around with mobile browser/device detection at all; this is where media queries excel. Think more organically, and instead of having to constantly update your website with new devices and mobile browsers, just use one CSS file, and utilize CSS3's max-width/max-device-width.

Place <meta name="viewport" content="width=device-width"/> in your header, and in your CSS file parse it into a desktop version and a mobile version:

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

回复收藏 0 原文