使用移动设计的媒体查询的最佳方式 [英] Best way to use Media Queries for Mobile Designs
问题描述
我知道什么是媒体查询，以及为什么使用这些查询，但我不确定如何使用这些查询开发移动网站。
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.
示例：我有mysite.com有一个样式表所有必要的样式（让我们说它是一个相当大的文件）。在这一点上，我的样式都没有针对较低的屏幕分辨率或其他设备。
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.
然后我决定制作我的网站的移动版本。为了方便起见，我现在只定位iPhone用户，如果代码检测到有人在iPhone上访问我的网站，他们会获得移动版本。
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?
说我的网站完全用浮点，但我的手机版本只会显示堆叠在彼此之上的每个元素。如何显示使用媒体查询？它是简单的声明float：none;或者什么？
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?
我发现了许多使用媒体查询，但我找不到一个完整的网站的一个工作示例。如果我有一个mobile.css和main.css链接在同一个HTML页面，他们如何一起工作，以保留我的网站的一些方面在手机版本，但更改其他？
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.
推荐答案
有四种方法可以做到这一点：
There are (at least!) four ways to do this:
- 正常CSS，底部有媒体查询（因此它们覆盖了上面的CSS）
- 使用媒体查询加载两个
-
- 在HTML中添加不同CSS链接的服务器端检测
- 服务器端检测，然后重定向到m.example.com example.com/mobile
如果你正在谈小的更改（float：none，不同的字体大小等），那么我会去
如果CSS有很多很多的变化，我会使用2或3（3不是那么好，因为你依赖于useragents，而不是屏幕属性）。如果HTML和CSS更改，我会使用4。
If you are talking minor changes (float:none, different font sizes etc) then I'd go for 1. If there are lots and lots of changes to the CSS, I'd use 2 or 3 (3 isn't as good, as you rely on useragents, rather than screen properties). If the HTML and CSS changes, I'd use 4.
对于所有这一切，检查您的工作在Internet Explorer 6 - 8，他们可能会忽略媒体查询和使用所有的CSS，包括移动位，如果你使用1。
For all of this, check your work in Internet Explorer 6 - 8, they may ignore the media queries and use all the CSS, including the mobile bits if you use 1.
查看 http： //mediaqueri.es/ 了解使用1和2的网站的一些示例。
Have a look at http://mediaqueri.es/ for some examples of sites using 1 and 2.
这是另一个可能有帮助的资源：https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4
Here's another resource that might help: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4
这篇关于使用移动设计的媒体查询的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
