Question

我正在尝试增加交换机的大小，因为它不够大，无法在一些较小的屏幕上阅读。理想情况下，它的大小只有两倍，但在某一点之后，文本不会变大。

HTML：

    <div id="switch">
        <select name="flip-min" id="flip-min" data-role="slider">
            <option class="switchTxt" value="off">Images Off</option>
            <option class="switchTxt" value="on">Images On</option>
        </select>
    </div>

CSS：

    #switch {
        position:absolute;
        bottom:1%;
        left:1%;
    }
    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
        display: block;
        padding: 0.9em 75px 0.9em 15px;
    }
    #switch .ui-slider-switch { 

        width:.2em;
        font-size:800px;
    }
    .switchTxt {
        font-size:500px;
    }

http://jsfiddle.net/rAGyC/

Answer 1

<强> DEMO

给定标准开关标记：

<div id="switch">
    <select name="flip-min" id="flip-min" data-role="slider">
        <option class="switchTxt" value="off">Images Off</option>
        <option class="switchTxt" value="on">Images On</option>
    </select>
</div>

CSS增加滑块大小以允许更大的文本，增加开关手柄以适应新的大小，最后增加字体。 32px是默认16px大小的两倍：

#switch .ui-slider {
    width: 240px;
    height: 60px;
}
#switch .ui-slider-handle {
    width: 40px;
    height: 60px;
    margin: 0;
}
#switch .ui-slider-inneroffset {
    margin: 1px;
    margin-right: 43px;
}
#switch .ui-slider-label { 
    font-size:32px;
}

如何增加移动交换机的字体大小？

1 个答案: