月度归档: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多页面应用

  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