我正在为我的网站使用JQuery Mobile，但是表单元素对于网页来说太大了。是否有我可以响应式地为整个站点应用 data-mini="true"？即为网站应用迷你(> 768px(，如果屏幕宽度<768px，则不适用？
我知道我可以单独申请，但是我是否可以设置一个适用于整套元素的地方。
是的，将.ui-mini类应用于正文，除了一些小故障之外，jQuery Mobile CSS 将完成其余的工作。
您将在下面的演示CSS中找到一些小的修补程序。对于flipswitches，请使用复选框版本。
演示：(表单库(
function miniUI(e) {
$("body").toggleClass("ui-mini", window.innerWidth > 768);
}
$(function() {
$(window).on("throttledresize", function(e) {
miniUI(e);
});
});
$(document).on("pagecontainerbeforeshow", function(e, ui) {
miniUI(e);
});/* Hotfix for mixed controlgroup buttons */
.ui-mini .ui-btn {
font-size: inherit !important;
}
/* Hotfix for sliders */
.ui-mini .ui-slider .ui-slider-track,
.ui-mini .ui-rangeslider .ui-slider-track {
height: 12px !important;
top: 8px !important;
}
.ui-mini .ui-slider .ui-slider-track .ui-slider-handle,
.ui-mini .ui-rangeslider .ui-slider-track .ui-slider-handle{
height: 14px !important;
width: 14px !important;
margin: -8px 0 0 -8px !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h2>Responsive Mini</h2>
</div>
<div data-role="content">
<label for="textinput-2">Text Input:</label>
<input type="text" name="textinput-2" id="textinput-2" placeholder="Text input" value="">
<label for="search-2">Search Input:</label>
<input type="search" name="search-2" id="search-2" value="">
<label for="textarea-2">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-2" id="textarea-2">Textarea</textarea>
<label for="select-native-2">Native select:</label>
<select name="select-native-2" id="select-native-2">
<option value="small">One</option>
<option value="medium">Two</option>
<option value="large">Three</option>
</select>
<label for="select-multiple-2">Custom multiple select:</label>
<select multiple="multiple" data-native-menu="false" name="select-multiple-2" id="select-multiple-2">
<option value="">Choices:</option>
<option value="small">One</option>
<option value="medium">Two</option>
<option value="large">Three</option>
</select>
<fieldset data-role="controlgroup">
<legend>Vertical controlgroup, buttons:</legend>
<button class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-right">One</button>
<input type="button" data-icon="back" data-iconpos="right" value="Two">
<a href="#" class="ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-right">Three</a>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal controlgroup, buttons:</legend>
<button class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-right">One</button>
<input type="button" data-icon="back" data-iconpos="right" value="Two">
<a href="#" class="ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-right">Three</a>
</fieldset>
<fieldset data-role="controlgroup">
<legend>Vertical controlgroup, select:</legend>
<label for="select-v-2a">Select A</label>
<select name="select-v-2a" id="select-v-2a">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
<label for="select-v-2b">Select B</label>
<select name="select-v-2b" id="select-v-2b">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
<label for="select-v-2c">Select C</label>
<select name="select-v-2c" id="select-v-2c">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal controlgroup, mixed:</legend>
<a href="#" class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-right">Link</a>
<button class="ui-btn ui-shadow ui-corner-all ui-icon-grid ui-btn-icon-notext">Button</button>
<label for="select-v-2e">Select</label>
<select name="select-v-2e" id="select-v-2e">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
</fieldset>
<label for="slider-2">Slider:</label>
<input type="range" name="slider-2" id="slider-2" value="50" min="0" max="100" data-highlight="true">
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<label for="range-1b">Rangeslider:</label>
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
<label for="range-1b">Rangeslider:</label>
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>
<fieldset>
<label for="checkbox-based-flipswitch">Checkbox-based:</label>
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
</fieldset>
<fieldset data-role="controlgroup">
<legend>Single checkbox:</legend>
<label for="checkbox-2">I agree</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
</fieldset>
<fieldset data-role="controlgroup">
<legend>Vertical controlgroup, checkbox:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
<label for="checkbox-v-2a">One</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
<label for="checkbox-v-2b">Two</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
<label for="checkbox-v-2c">Three</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>Vertical controlgroup, radio:</legend>
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
<label for="radio-choice-v-2a">One</label>
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
<label for="radio-choice-v-2b">Two</label>
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="other">
<label for="radio-choice-v-2c">Three</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal controlgroup, checkbox:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a">One</label>
<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
<label for="checkbox-h-2b">Two</label>
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
<label for="checkbox-h-2c">Three</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal controlgroup, radio:</legend>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
<label for="radio-choice-h-2a">One</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
<label for="radio-choice-h-2b">Two</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
<label for="radio-choice-h-2c">Three</label>
</fieldset>
<label for="submit-2">Send:</label>
<button class="ui-shadow ui-btn ui-corner-all" type="submit" id="submit-2">Submit</button>
</div>
<div data-role="footer" data-theme="b">
<h2>Footer</h2>
</div>
</div>
</body>
</html>以整页显示代码段以查看差异。