月度归档：2018年05月

css实现响应式正方形或固定宽高比

前端


代码如下
HTML:

<div class="square">
  <div class="content">
    Hello!
  </div>
</div>

css:

.square {
  position: relative;
  width: 50%;
  border: 4px solid red;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

See the Pen jxXeEB by Qing Sheng (@shengoo) on CodePen.

原理如下

在.square中创建一个伪元素，使用padding-bottom: 100%;，伪元素会用父级节点的宽度来计算100%，所以高度就是父级的宽度，这样就能实现正方形来。
同理，需要固定宽高比的情况下，都可以使用这种方式。

使用create-react-app生成react多页面应用

react
  1. 初始化react app 
    npx create-react-app multiple-page-app
  2. eject(eject前要commit) 
    yarn eject
  3. 在src文件夹里新建一个about.css(假如我们要做的另一个页面是about.html) 
    body{
    background-color: yellow;
}
  4. 在src文件夹里新建一个about.js 
    import React from 'react';
import ReactDOM from 'react-dom';
import './about.css';
ReactDOM.render(<div>about</div>, document.getElementById('root'));
  5. 增加入口配置，config/webpack.config.dev.js 
    entry: {
    index:[
        require.resolve('./polyfills'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs
    ],
    about: [
        require.resolve('./polyfills'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appSrc + "/about.js",
    ]
},
  6. 修改输出配置output选项 
    filename: 'static/js/[name].bundle.js',
  7. 增加HtmlWebpackPlugin 
    new HtmlWebpackPlugin({
    inject: true,
    chunks: ["index"],
    template: paths.appHtml,
}),
new HtmlWebpackPlugin({
    inject: true,
    chunks: ["about"],
    template: paths.appHtml,
    filename: 'about.html',
}),
  8. 效果如下

  9. 然后按照对dev.js的修改，同样修改好prod.js，就可以build出两个页面了。

完整代码可以在github上看到：
https://github.com/shengoo/react-demo/tree/master/multiple-page-app