小编sea*_*ion的帖子

我对媒体查询的世界很陌生,而且很明显,我忽略了宽度和设备宽度之间的差异 - 除了明显的定位能力之外.

我想将常规计算机和具有相同断点的设备作为目标,因此我只是将所有最小和最大宽度查询复制到min-device和max-device width查询.无论出于何种原因,当我添加-device对应物时,我的CSS被常规计算机解释得非常不同,而且我不确定我做错了什么.

你可以在这里看到效果(这应该是它应该是什么样的)

在这里(在我的查询中添加-device-width之后,我的CSS在最小的宽度上被搞砸了 - 即使浏览器宽度小于被调用的内容,也可以看到更大的分辨率).

这是我的CSS链接 - 我的语法有问题吗？:

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" …

我试图在div的三个面上使用暗阴影颜色,并在一侧使用光"发光" - 基本上使用两种不同的颜色作为CSS框阴影.到目前为止,我提出的最好的解决方案是在所有方面放置一个阴影但是一个,并使用第二个带有发光的div和第三个div来隐藏除了一边有边缘和溢出隐藏的所有边上的光晕.我只是想知道是否可能有更好的(仅限CSS)方法而不是我正在实施的方法？有任何想法吗？

在这里演示 - http://swanflighthaven.com/css-shadow-glow.html

在明亮的背景下看起来并不那么好看:http: //swanflighthaven.com/css-shadow-glow2.html

#main {
    max-width:870px;
    min-width:610px;
    margin:0px auto;
    position:relative;
    top:40px;
    min-height:400px;
}
#maininside {
    position:relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    padding:0px 25px 25px 25px; 

}
#maininner {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    min-height:385px;
    padding:0px 15px 15px 15px;
    background:url(center.png) repeat;

}
#glow {
    position:absolute;
    height:50px; …