小编dsi*_*gnr的帖子
为什么媒体查询的顺序在CSS中很重要？
最近,我一直在设计响应更快的网站,而且我经常使用CSS媒体查询.我注意到的一种模式是定义媒体查询的顺序实际上很重要.我没有在每个浏览器中测试它,只是在Chrome上测试.这种行为有解释吗？有时,当您的网站无法正常工作时会感到沮丧,并且您不确定它是查询还是查询的编写顺序.
这是一个例子:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;} …推荐指数
解决办法
查看次数
Jquery UI - 嵌套Droppables/Sortables
我正在尝试构建一个交互式Web应用程序.使用Jquery UI,但我被困在这里 - 我似乎无法找到一种方法来"嵌套"我的"盒子"(请参阅小提琴演示).例如,假设有四个盒- 甲,乙,Ç,d.如果A是宽度和高度值较高的父级,我将b拖放到A中 - 这样可以正常工作.我尝试将另一个"盒子" C拖放到A中,这也很好.但是当我试图将D(或者甚至C,这无关紧要)放入B(嵌套)时,它似乎不起作用(见小提琴).
请注意,小提琴不包含单独的"Boxes",而只包含一个多次复制的框.还要注意我还没有实现排序功能(在小提琴中),因为我还没能解决嵌套问题.
JS小提琴:http://jsfiddle.net/JQwsf/
为了确保我不想在这里混淆任何人,我附上了一张图片.
任何帮助都非常感谢.谢谢.
推荐指数
解决办法
查看次数
使用CSS将整个图像用作网站背景并且仍能满足不同屏幕尺寸的更好方法？(比如about.me)
目前我正在使用这个:
HTML:
<div id="container">
<img src="x.jpg" id="bg" />
<div id="content">
<h1>Welcome to my website.</h1>
<p>Boo!</p>
</div>
</div>
CSS:
#bg{
position:absolute;
top:0;
left:0;
height:100%;
z-index:10;
}
#container{
/* max values provided due to the max size of the image available with me(1200x800) */
max-width:1200px;
max-height:800px;
}
#content{
position:absolute;
top:10px;
left:100px;
z-index:100;
}
这里的优点是我根本不使用任何Javascript.但是,当在不同的屏幕上观看时,绝对定位的元素变成了一场噩梦.
目前我的解决方案是根据不同的屏幕尺寸编写和定位这些元素(例如,1024x768将id内容的最高值设置为10px而1280x800将具有类似top:25px的内容;依此类推......)并将它们存储为一个单独的css文件,所以我可以在页面加载期间加载适当的CSS.我觉得这很耗时,也可能效率不高.使用百分比值是我尚未探索的选项.如果你知道一个优雅的解决方案,或者大约有些人在做什么,它会有所帮助.
谢谢.
推荐指数
解决办法
查看次数
Jquery - 直系孩子
我有这样的结构:
<ul id="mycustomid">
<li><a>Item A</a>
<ul class="children">
<li><a>Child1 of A</a>
<ul class="children">
<li><a>Grandchild of A</a>
<ul class="children">
<li><a>Grand Grand child of A</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Item B</a></li>
<li><a>Item C</a></li>
</ul>
现在,我正在使用Jquery来获取ul#mycustomid的直接子节点.但是我的代码在我的结构中返回了所有li.我该怎么办？
这是我的代码:
$(document).ready(function() {
var arri = $("#mycustomid>li").text();
alert(arri);
});
我也试过了.children(),它给了我几乎相同的结果.这真让我紧张:(
我的警报框输出完全如下所示(包括那些白色间隙):
Item A
Child1 of A
Grandchild of A
Grand Grandchild of A
ItemBItemC
然而,它应该只是(没有空格):
Item A
Item B
Item C
要了解我的问题,您可以访问http://jsfiddle.net/yS6ZJ/查看实时版本
请指出我正确的方向,
谢谢
推荐指数
解决办法
查看次数
Elixir:模式匹配特定类型的列表？
我有一个任意大小的结构列表.
我们称之为l.
l = [%X{a:1}, %X{a:3}, %X{a:9}, %X{a:11}]
大小l不断变化.我想知道的是我如何模式匹配l以确保它总是由结构组成%X{}.如果列表包含其他内容,我希望模式匹配失败.例如:
l = [%X{a:1}, %X{a:3}, %Y{a:9}, %Z{a:11}]
我尝试过的事情
i = %X{}
j = %Y{}
[%X{}|_] = [i,i,i]
但这只匹配第一个元素.
[%X{}|_] = [i,j,j]
我的用例应该失败,但事实并非如此.也许如果有一个运算符或类似的东西,它将匹配特定类型的列表,这正是我正在寻找的:
[%X{}+] = [i,i,i] # Doesn't exist, just an example
一些背景
我在菲尼斯,我有一个post与之has_many关系的模特images.给定的用户可以上传多个图像,我想模式匹配,以确保我%Plug.Upload{}在这种情况下使用正确的struct().
任何帮助深表感谢.谢谢 :)
推荐指数
解决办法
查看次数
Jquery树遍历 - 嵌套的无序列表元素到JSON
好的,现在我在这里有一个无序列表:
<ul id="mycustomid">
<li><a href="url of Item A" title="sometitle">Item A</a>
<ul class="children">
<li><a href="url of Child1 of A" title="sometitle">Child1 of A</a>
<ul class="children">
<li><a href="url of Grandchild of A" title="sometitle">Grandchild of A</a>
<ul class="children">
<li><a href="url of Grand Grand child of A" title="sometitle">Grand Grand child of A</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="url of Item B" title="sometitle">Item B</a></li>
<li><a href="url of Item C" title="sometitle">Item C</a></li>
</ul>
基本上,我想将此数据转换为JSON实体.我想在Jquery中完成这个工作,我想我真的很难做到这一点.上面的列表只是一个例子,实际上,我的列表理想情况下会有更多的孩子,并且可能是'n'级别深(意思是,它将有孙子孙子孙子孙子孙女......或者更多)我失去了无数在这个小时的睡眠,我不认为我会去任何地方:(
我想提取这些东西:锚内的文本,锚的url和锚的标题,并将它们放到JSON实体上
我上面列表的JSON格式是这样的:
{
name: "Item A",
url: "url of …推荐指数
解决办法
查看次数