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')
    );
  • 相关阅读:
    centos6升级内核
    centos7启动盘制作
    sed匹配字符串并将匹配行的后几行注释
    cmd下调用xshell登录linux服务器
    centos清除历史命令
    yum错误Cannot retrieve metalink for repository: epel/x86_6
    ansible-playbook
    jdk升级到1.8
    shell瞎记录
    shell 循环
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6946460.html
Copyright © 2011-2022 走看看