设计放大或缩小的方式是什么？我想弄清楚到底发生了什么的CSS水平,什么样的后果是不同大小的方法(px,em,rem等).
顺便说一句,我主要关注的是现代桌面浏览器的缩放行为.(我怀疑移动浏览器在正常呈现之后是整个页面的直接放大,并且知道旧式浏览器只是递增基本字体大小).然而,目前尚不清楚的是现代浏览器(比如最新版本的Chrome或FF)在用户按Ctrl +或时完全正确Ctrl -.
他们也只是正常渲染页面(即100%),然后只是放大渲染图像？因为FF似乎仍然尊重%宽度,所以它似乎不是直接放大.
Gitlab CI要求您指定一个正则表达式来提取语句代码覆盖率(以便它们可以显示它).鉴于下面的构建输出(使用jest和istanbul),我已经设法达到:/Statements.*(\d+\%)/
... (other build output)
=============================== Coverage summary ===============================
Statements : 53.07% ( 95/179 )
Branches : 66.67% ( 28/42 )
Functions : 30.99% ( 22/71 )
Lines : 50.96% ( 80/157 )
================================================================================
... (other build output)
这突出了该部分Statements : 53.07%(见这里:http://regexr.com/3e9sl).但是,我只需匹配53.07部分,我该怎么做？
我已经实现了jest快照测试,效果很好.我唯一无法解决的是我的组件在我的CI上呈现不同的快照.我的测试是:
/* eslint-env jest */
/* eslint import/no-extraneous-dependencies: "off" */
import React from 'react';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Combobox from '../Combobox';
describe('<Combobox />', () => {
it('renders correctly', () => {
const wrapper = shallow(
<Combobox
items={[]}
placeholder=""
valueKey=""
labelKey=""
/>
);
expect(shallowToJson(wrapper)).toMatchSnapshot();
});
});
该组件是:
import React, { PropTypes } from 'react';
import Select from 'react-select';
export default class Combobox extends React.Component {
constructor(props) {
super(props);
this.state = {
currentValue: …我正在使用airbnb eslint设置,该规则具有强制将无状态反应组件重写为纯函数的规则.以下组件触发此规则,这意味着下面的组件将更好地编写为纯函数:
import React from 'react';
import { observer } from 'mobx-react';
import cssmodules from 'react-css-modules';
import styles from './index.css';
import Select from '../Select/';
import List from '../List/';
@cssmodules(styles)
@observer
export default class Analysis extends React.Component {
render() {
return (
<div styleName="wrapper">
<div styleName="column">
<Select store={this.props.store} />
</div>
<div styleName="column">
<List store={this.props.store} />
</div>
</div>
);
}
}
Analysis.propTypes = {
store: React.PropTypes.object.isRequired,
};
但是,当我将其重写为纯函数(见下文)时,我得到的错误是Leading decorators must be attached to a class declaration:
import React …我正在尝试使容器填满整个页面(或视口,以较大者为准),但遇到了一些麻烦.我正在使用这篇文章中的建议:https://stackoverflow.com/a/17555766,设置<html>和<body>达到100%的高度.
但我注意到.Contentdiv只在<body>高度设置时才填充视口height: 100%,但不是min-height: 100%.这是为什么？为什么不设置它设置时.Content的高度？有没有解决这个问题(没有绝对定位或固定高度)？<body>min-height
HTML
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen:http://codepen.io/anon/pen/mJEMVX
PS:当<body> …
我在我遇到的几个脚本中看到了这个约定.如果没有传递给函数,它应该初始化一个空选项对象:
module.exports = function (opts) {
// Create empty options if none are passed
opts = opts || {};
};
但在阅读本文时我很想知道,这不会创建一个全局opts变量吗？用它作为前缀不是更好var吗？或者commonjs模块样式会阻止这种情况吗？