[TypeStyle] Add responsive styles using TypeStyle Media Queries

转载于 2017-06-05 18:30:00 发布 · 83 阅读

文章标签：

本文介绍如何使用TypeStyle库实现响应式设计，通过CSS in JS的方式轻松编写媒体查询。文章展示了不同屏幕尺寸下的字体大小调整，并介绍了组织媒体查询的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')
);