小编Qua*_*cal的帖子

我一直在研究媒体查询,我仍然不太了解如何定位某些尺寸的设备.

我希望能够定位台式机,平板电脑和移动设备.我知道会有一些差异,但是有一个可用于定位这些设备的通用系统会很不错.

我找到的一些例子:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

要么:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

您认为这些"断点"对于每个设备应该是什么？

由于各种原因,我有一个嵌套的ol内部div,其中列表的内容超过了容器的大小.

由于容器具有固定宽度,因此列表元素的背景不会超过容器的可视区域,但内容会正确滚动.

我创建了一个jsFiddle,显示了我想要解释的简化示例.

我希望包含的元素的宽度与溢出内容的宽度相匹配.在jsFiddle中,这意味着红色背景不会在中途被切断.

谢谢.

div
{
    border: 1px solid black;
    margin: 33% auto;
    overflow: scroll;
    white-space: nowrap;
    width: 100px;
}

div > ol
{
   background: red;
   width: 100%;
}?

我有一些CSS按钮在悬停时更大.我还将文本设置得更大但是我想将文本向下移动几个px而不会弄乱使用的背景图像.

救命？

我的代码看起来像这样:

<div id="nav">
    <a href="index.php">Home</a>
    <a id="headrush">Beer Bongs</a>
    <a id="thabto">Novelty</a>
</div>

#nav a {
    background: url(Images/Button.png);
    height: 28px;
    width: 130px;
    font-family: "Book Antiqua";
    font-size: 12px;
    text-align: center;
    vertical-align: bottom;
    color: #C60;
    text-decoration: none;
    background-position: center;
    margin: auto;
    display: block;
    position: relative;
}

#nav a:hover {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 16px;
    text-align: center;
    color: #C60;
    text-decoration: none;
    margin: -3px;
    z-index: 2;
}

#nav a:active {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book …

目标是手动设置保持键的"重复率".

例如,当在文本框中并按住X键时,我理解有特定于浏览器的方式来重复按下的字符.在某些情况下,它会暂停,然后不断触发按下的键.在其他情况下,它根本不重复.我想通过强制按下的键以特定间隔重复来缓解这种情况,无论浏览器如何.

通过研究,我想出了一个基于计时器的尝试,但在Safari中,它不会重复这个角色.我有一个菜单系统,按住箭头滚动列表,但翻译动画和重复率彼此不喜欢.

var repeating = false;
var repeatRateTimer = null;

$( document ).bind( 'keyup', function( input ) {
    if( repeatRateTimer != null )
    {
        clearTimeout( repeatRateTimer );
        repeatRateTimer = null;
    }

    repeating = false;
} );

$( document ).bind( 'keydown', function( input ) {
    input.preventDefault( );

    if( repeating == true )
    {
        if( repeatRateTimer != null )
        {
            clearTimeout( repeatRateTimer );
            repeatRateTimer = null;
        }
        else
        {
            repeatRateTimer = setTimeout( function( ){ repeating = false; }, 1000 …

我有一个元素有一个子元素和另一个元素具有相同的子元素,但也有一个文本节点:

<p><strong>This should be heading</strong></p>
...
<p>There is a sentence that has <strong>strong text</strong> inside it.</p>

我没有能力以任何方式修改DOM结构,包括没有JavaScript.所有我能做的就是编辑CSS,但我想样式内嵌strong不同于strong那是唯一的孩子.

我认为这可行:

p strong:only-child
{
    color: red;
}

但是,这两个项目都变红了.

有没有办法只使用CSS来定位没有文本节点兄弟节点的子节点？

我不认为它可以做到,但我想我会问,以防有一些聪明的解决方法.

在mailto://超链接中使用其他参数时,光标位于消息的开头.是否可以将光标的起始位置设置为正文中的另一个位置？

例如,请考虑以下HTML:

<a href="mailto://example@example.com?subject=Hello&body=Hello,%0D%0A%0D%0A%0This%20is%20an%20additional%20line%20of%20text...">Click Here To Email Me</a>

单击该链接将启动最终用户的默认电子邮件客户端,并且(如果客户端支持它)将预先填充to字段example@example.com,主题字段Hello和body字段:

Hello,

This is an additional line of text...

光标的默认定位(即在OS X Mail.app中)位于正文的开头,在单词"Hello"之前.

如何将光标定位在省略号之后,以便最终用户可以完成消息？这甚至可能吗？

我正在使用EPUB.JS,它使用以下代码从ePub文件中获取一些信息:

var navEl = navHtml.querySelector('nav[*|type="toc"]')

这行代码在IE10中失败,因为querySelector返回null.我以前从未在格式中看过属性选择器[*|attr="val"],但我认为他们试图说的是,"选择所有具有任何属性的导航元素或名为'type'且属性值为'toc'的属性."

我找不到关于这个star-pipe语法的任何信息,但我认为它是某种逻辑OR命令,可以在Webkit/Mozilla中运行,但不能在IE中运行.

将该行改为:

var navEl = navHtml.querySelector('nav')

但是我仍然希望完全理解为什么当我觉得它没有意义时他们可能选择了其他语法,以防它有一个可能导致其他地方错误的实际目的.

对此有任何解释,*|...甚至是必要的吗？

我正在试图找出如何添加Google Maps MarkerLabel.

我能够得到一个标准标记来显示,但当我尝试!在标记上添加标签时,我得到了google.maps.MarkerLabel is not a function.

var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    label: new google.maps.MarkerLabel({
        text: '!'
    }),
    map: myMap,
    position: myMapOptions.center
});

我猜我不能用这种方式实例化一个新的MarkerLabel对象.我应该做些什么来在标记内部获得一个感叹号.

我创建了一个SVG文件,我打算用它作为CSS中的背景图像.我希望能够使用query-string参数更改SVG中的填充颜色,如下所示:

#rect     { background-image: url( 'rect.svg' ); }
#rect.red { background-image: url( 'rect.svg?color=red' ); }

据我所知,在SVG中使用脚本标签,我能够获取color参数并更新填充颜色.这是一个示例SVG:

<!DOCTYPE svg PUBLIC "-//W3C//DDTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" />

    <script>
    <![CDATA[
        var params = { };
        location.href.split( '?' )[1].split( '&' ).forEach(
            function( i )
            {
                params[ i.split( '=' )[0] ] = i.split( '=' )[1];
            }
        );

        if( params.color )
        {
            var rect = document.getElementsByTagName( "rect" )[0];
            rect.setAttribute( "fill", params.color );
        }
    ]]>
    </script>
</svg>

直接转到文件或使用对象标签似乎有效,但对于CSS背景图像或img标签,颜色参数将被忽略.

我不确定这里发生了什么,我希望有一个解释或替代解决方案,我正在努力完成(最好不要求助于服务器端处理).

这是一个显示不同渲染方法的jsFiddle: …

我正在尝试创建一些逻辑来生成双败淘汰赛分组中的赛事时间表中的赛事时间表。

以下是 8 队分组示例：

rd1 quarter    semi    finals\nA\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n  0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80A\xe2\x94\x90\nB\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98        \xe2\x94\x82\n           4 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80A\xe2\x94\x90\nC\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90        \xe2\x94\x82         \xe2\x94\x82\n  1 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80C\xe2\x94\x98         \xe2\x94\x82\nD\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98                  \xe2\x94\x82\n                    10 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80A\xe2\x94\x90\nE\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90                  \xe2\x94\x82       \xe2\x94\x82\n  2 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80E\xe2\x94\x90         \xe2\x94\x82       \xe2\x94\x82\nF\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98        \xe2\x94\x82         \xe2\x94\x82       \xe2\x94\x82\n           5 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80E\xe2\x94\x98       \xe2\x94\x82\nG\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90        \xe2\x94\x82              13 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80= Champ\n  3 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80G\xe2\x94\x98                 \xe2\x94\x82\nH\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98                          \xe2\x94\x82\n                    E\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90     \xe2\x94\x82\n         C\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90           \xe2\x94\x82     \xe2\x94\x82\n    B\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90  8 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80C\xe2\x94\x90  12 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80E\xe2\x94\x98\n      6 \xe2\x94\x9cB\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98     \xe2\x94\x82     \xe2\x94\x82\n    D\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98       11 \xe2\x94\x9cC\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n         G\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90     \xe2\x94\x82\n    F\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90  9 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80G\xe2\x94\x98\n      7 \xe2\x94\x9cF\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n    H\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n

这些数字表示匹配数组中的索引，这是所需的输出。例如，索引 0 将代表第 1 队与第 8 队（使用种子系统），索引 4 将代表索引 …

我需要使用 vuetify 动态加载图像（来自我的文件系统而不是 url）。但是，当我在 v-img 元素中绑定路径变量时，vue 找不到它。当我使用“必需”方法静态放置它时，就可以了。

如何使用 vuetify 选择动态路径？这是文件加载器的问题吗？

我希望在运行时动态选择图像。例如，如果我有“下一个”按钮，我想加载下一个图像。这是 Vue.js 中的代码

<html>   
   <v-img 
      v-bind:src="require(myPath)"
      aspect-ratio="1.5"
      max-height="500"
      contain
   />
</html>

<script>    
    data: () => ({
        mycount: 1,
        myPath: "../myimages/2.png"
    })
</script>

[Vue 警告]：渲染错误：“错误：找不到模块‘../myiamges/2.png’”在 ---> 中找到 ---> at src/App.vue vue.runtime.esm.js:619 错误：“找不到模块 '../imyimages/2.png'" webpackEmptyContext 组件同步：2 渲染 Gamesheet.vue:30 VueJS 21 运行 es6.promise.js:75 通知 es6.promise.js:92 刷新 _microtask.js:18 vue .runtime.esm.js:1888

<input/>我正在尝试为Vue.js 中的元素制作包装组件。

成分：

<template>
  <div>
    <input v-bind="$attrs" :value="value" @input="input" />
    ...
  </div>
<template>

Vue.component("my-input", {
   inheritAttrs: false,
   props: ['value'],
   methods: {
     input($event): void {
       this.$emit("input", $event.target.value)
     }
  }
})

用法：

<my-input v-model="myModel" />

这似乎工作得很好。模型通过输入事件处理程序发出目标元素值来更新。

但是，现在我尝试将此组件与一些现有代码一起使用：

<my-input v-model="myModel2" @input="something = $event.target.value" />

这就是我在活动中遇到麻烦的地方$emit("input")。我收到以下错误：

无法读取未定义的属性“值”

因此，我$emit正在发出该值，但现在现有的@input="something..."事件处理程序无法$event正确引用该值。

如果我更改组件的input方法来发出$event而不是$event.target.value，新代码似乎可以工作，但随后模型没有更新更新为InputEvent而不是实际值。

我不确定我需要做什么。