小编raf*_*fr3的帖子

JavaScript - 理解方法

我对理解方法原理有疑问.
我理解功能,我知道

function hello() {
    alert('Hello World');
}  
Run Code Online (Sandbox Code Playgroud)

是相同的

var hello = function() {
    alert('Hello World');
}  
Run Code Online (Sandbox Code Playgroud)

现在,我的问题是什么.
这是我的一个方法的对象.我不明白为什么yarsLeft内部不需要括号function people()
我正在寻找一个合乎逻辑的解释.

function people(name, age) {
    this.name = name;
    this.age = age;
    this.yearsUntilRetire = yearsLeft; // this is confised for me
}

function yearsLeft() {
    var numYears = 65 - this.age;
    return numYears;
}
Run Code Online (Sandbox Code Playgroud)

创建对象

var test = new people('Superman', 50);
test.yearsUntilRetire(); // I understand this code and calling a method in that way
Run Code Online (Sandbox Code Playgroud)

为什么我不能写this.yearsUntilRetire() = yearsLeft …

javascript oop methods

4
推荐指数
1
解决办法
60
查看次数

calc() 无法在复杂计算中正常工作

我知道这个主题已经发布了很多次,但我找不到关于calc()函数的问题的答案。我知道 和 之间的空间问题+-但这次问题与此无关。

我无法使用正确连续显示 3 个图像
width: calc((100% - 20px) / 3);

最后一张图片应该放在同一行,但它被向下移动了。它具有margin-right: 0这样的表达方式,calc((100% - 20px) / 3)应该将这三个img彼此并排成一行。

完整代码

* { margin: 0; padding: 0; background: red;}

img {
  float: left;
  margin-right: 20px;
  width: calc((100% - 20px) / 3);
  
  &.last { margin-right: 0; }
}
Run Code Online (Sandbox Code Playgroud)
<!-- images should be displayed
      - in a row
      - with margin right 20px except last
------------------------------------------->

<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img class="last" …
Run Code Online (Sandbox Code Playgroud)

css responsive-design

2
推荐指数
1
解决办法
3054
查看次数

CSS 断点和 em 单元

当我尝试在em媒体查询中使用单位时,我注意到单位基于浏览器的默认字体大小,而不是html根。
它工作时,奇我会集到20em的元素宽度时断点min-width: 20em。在这种情况下,两个单位并不相等,因为元素的20em基于html font-size浏览器的默认字体大小而媒体查询基于默认的浏览器字体大小。

有没有一种方法可以使用emunit实现相同的大小,而无需仅为断点 ( @bp-size: 16.250em)定义额外的、单独的变量?

html {
  font-size: 0.813em;  // 13px (assume default browser font-size: 16px)
}

.box {
  width: 1em;          // 13px x 13px
  height: 1em;
  background-color: #000;
  

  // Problem
  
  @size: 20em; 

  @media screen and (min-width: @size) {     // 320px (20 x 16px) why not 260px?
    width: @size;                            // 260px (20 x 13px)
    background-color: #f00;
  }
}
Run Code Online (Sandbox Code Playgroud)
<div class="box"></div>
Run Code Online (Sandbox Code Playgroud)

css breakpoints em

1
推荐指数
1
解决办法
1253
查看次数

标签 统计

css ×2

breakpoints ×1

em ×1

javascript ×1

methods ×1

oop ×1

responsive-design ×1