CSS媒体查询屏幕尺寸 [英] CSS media queries for screen sizes

问题描述

我目前正试图设计一个可兼容多种屏幕尺寸的布局。我设计的屏幕尺寸如下：

I am currently trying to design a layout which will be compatible for multiple screen sizes. The screen sizes I am designing for are listed below:

屏幕尺寸：

1. 640x480


2. 800x600


3. 1024x768


4. 1280x1024 / li>
   

1. 640x480
2. 800x600
3. 1024x768
4. 1280x1024 (and larger)

我遇到的问题是创建css3媒体查询，以便当窗口宽度变为一个时的这些宽度。下面是我目前使用的媒体查询示例，但它不适合我，所以我想知道是否有人可以帮助我修复它。

The thing that I'm having trouble with is creating the css3 media queries, so that my layout changes when the window's width gets to one of these widths. Below is an example of the media queries I'm currently using, but it is not working for me, so I'm wondering if someone could help me fix it.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

我尝试使用一组新的媒体查询，但他们仍然不能为我工作。有人可以帮助解释我是东错了。你们中有几个已经尝试过解释，但我没有得到它。新的媒体查询如下所示：

I tried going with a new set of media queries, but they still aren't working for me. Could someone please help explain what I'm dong wrong. Several of you have already tried explaining, but I'm not getting it. The new media queries are displayed below:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">

推荐答案

除非你有更多的样式表， ve混乱了你的断点：

Unless you have more style sheets than that, you've messed up your break points:

#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)

第三个媒体查询可能是 min-width：901px 。现在，它与＃1和＃2重叠，并且只在屏幕宽度为901像素时自己控制页面布局。

The 3rd media query is probably meant to be min-width: 901px. Right now, it overlaps #1 and #2, and only controls the page layout by itself when the screen is exactly 901px wide.

编辑更新的问题：

(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)

媒体查询不像catch或if / else语句。如果任何条件匹配，则它将应用来自匹配的每个媒体查询的所有样式。如果您只为所有媒体查询指定 min-width ，则可能会匹配部分或全部媒体查询。在您的情况下，640像素宽的设备匹配所有4个媒体查询，因此所有样式表都加载。您最有可能寻找的是：

Media queries aren't like catch or if/else statements. If any of the conditions match, then it will apply all of the styles from each media query it matched. If you only specify a min-width for all of your media queries, it's possible that some or all of the media queries are matched. In your case, a device that's 640px wide matches all 4 of your media queries, so all for style sheets are loaded. What you are most likely looking for is this:

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

现在没有重叠。仅当设备的宽度介于指定的宽度之间时，样式才会应用。

Now there's no overlap. The styles will only apply if the device's width falls between the widths specified.

这篇关于CSS媒体查询屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！