随着不同设备类型和屏幕尺寸的增加，开发者面临着一项重要的任务：如何创建一个在任何设备上都可以完美显示的网站。响应式设计（Responsive Web Design）应运而生，它可以使网站能够根据设备屏幕的尺寸自适应调整。
在响应式设计中，合适的尺寸预设规则可以让不同屏幕上的元素比例、间距等显示效果更加美观。本文将深入探讨响应式设计中如何设计尺寸的预设规则。
设计尺寸预设规则的目的
在响应式设计中，设计师需要针对不同尺寸的屏幕设置相应的布局和样式。而浏览器根据不同尺寸的屏幕决定采用哪一组CSS规则。
但针对不同屏幕逐个设置CSS规则不仅费时费力，还容易出错。因此，为了方便设计师设置预设的布局和样式，设计尺寸预设规则成为响应式设计中不可或缺的一部分。
设计尺寸预设规则的方法
1. 使用相对单位
在响应式设计中，相对单位如%、em、rem等是必不可少的。相对单位的特点是可以根据最近的父元素或根元素来计算尺寸，尺寸会自适应调整，适应不同屏幕大小。
下面是一个使用%和em的例子。
// javascriptcn.com 代码示例
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
<style>
#parent {
width: 80%;
font-size: 16px;
}
#child {
width: 50%;
height: 2em;
}
</style>在这个例子中，父元素的宽度设置为80%，字体大小为16px。而子元素的宽度设置为50%，高度设置为2em。根据这些规则，无论显示在何种设备上，子元素的宽度都会自动适应父元素的宽度、字体大小，高度也会自适应。
2. 使用媒体查询
媒体查询是根据不同的媒介（例如屏幕尺寸、分辨率等）来加载不同的CSS样式表。通过媒体查询，设计师可以针对不同屏幕设备设置预设规则，使网站效果更加美观。
下面是一个媒体查询的例子。
<head> <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 601px)" href="large.css"> </head>
在这个例子中，当屏幕宽度小于等于600px时，加载small.css。当屏幕宽度大于600px时，加载large.css。通过媒体查询，不同屏幕上所采用的CSS规则就不同，以达到预设的效果。
3. 使用CSS框架
CSS框架（如Bootstrap、Foundation等）是响应式设计的一种工具。具有成熟的代码框架，统一的样式风格和网格系统。它可以让设计师通过预设的规则，轻松地构建出符合响应式设计原则的网站。
下面是使用Bootstrap框架的例子。
// javascriptcn.com 代码示例
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">This is column 1</div>
<div class="col-md-6">This is column 2</div>
</div>
</div>
</body>在这个例子中，我们使用了Bootstrap框架的栅格系统。.container表示网页中的容器，.row表示行，.col-md-6表示每个列占据6个栅格。
总结
设计尺寸预设规则是响应式设计中的重要任务，它可以帮助设计师在不同屏幕设备上构建出美观的网站。相对单位、媒体查询、CSS框架是设计尺寸预设规则的三种方法，每种方法都有其优缺点。设计师应该根据实际情况选择最适合自己的方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528e1737d4982a6ebb6eab7