zoukankan      html  css  js  c++  java
  • [TypeStyle] Add responsive styles using TypeStyle Media Queries

    Media queries are very important for designs that you want to work on both mobile and desktop browsers. TypeStyle gives media queries special attention, making it easy to write them using CSS in JS.

    In this lesson we show TypeStyle's media function. We also demonstrate how you can add non standard media queries if you want. Finally we show how organizing media queries this way is encapsulated under CSS class names.

    import { style, media } from 'typestyle';
    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    
    const fontSize = (value: number | string) => {
        const valueStr = typeof value === 'string' ?
                         value :
                         value + 'px';
        return {
            fontSize: valueStr
        }
    };
    const className = style(
        {color: 'red', transition: 'font-size 0.2s'},
        media({maxWidth: 700, minWidth: 500}, fontSize(20)),
        media({minWidth: 701}, fontSize(30)),
        media({maxWidth: 499}, fontSize(15))
    );
    
    ReactDOM.render(
        <div className={className}>
            Hello Typestyle
        </div>,
        document.getElementById('root')
    );
  • 相关阅读:
    POJ 2342
    SHU 413
    SHU 414
    进制转换模板
    SHU 第15届上海大学程序设计联赛夏季赛[热身赛] 第三题(G题)
    POJ 3185
    XTU 1260
    高斯消元法模板
    POJ 2057
    模态窗口的定时关闭
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6946460.html
Copyright © 2011-2022 走看看