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')
    );
  • 相关阅读:
    Java入门(6)方法
    重构改善已有代码
    .NET面试题系列(八)电商瞬时抢购的方案
    .NET面试题系列(七)IIS
    设计模式综述
    基于ELK5.1(ElasticSearch, Logstash, Kibana)的一次整合测试
    acl.go
    单机部署-consul
    baseFileWriter.go
    config.go
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6946460.html
Copyright © 2011-2022 走看看