192 lines
5.5 KiB
Markdown
192 lines
5.5 KiB
Markdown
|
---
|
|||
|
title: Breakpoints
|
|||
|
localeTitle: 断点
|
|||
|
---
|
|||
|
## 概观
|
|||
|
|
|||
|
CSS断点是基于[媒体查询](https://guide.freecodecamp.org/css/css3-media-queries)更改网站布局的特定点 变得活跃。
|
|||
|
|
|||
|
通常,当您想要将网站的布局重新调整为浏览器视口的大小时,请指定断点;大多数情况下,视口的宽度。
|
|||
|
|
|||
|
例如,如果您的网站内容在狭窄的视口上看起来很棒(例如在智能手机浏览器上),但在较大的屏幕上看起来很糟糕(例如,字体尺寸太小而且难以阅读),那么你可能想为更大的屏幕引入一个新的断点,使字体更大:
|
|||
|
|
|||
|
CSS断点可以被认为是响应式网页设计的核心,因为它们定义了内容的行为或排列方式 不同的设备宽度/比例,允许您向用户显示最佳布局。
|
|||
|
|
|||
|
![例](https://getflywheel.com/wp-content/uploads/2018/02/css-breakpoints-layouts-01.jpg)
|
|||
|
|
|||
|
## 设置断点
|
|||
|
|
|||
|
断点基于以下任一方式广泛设定。
|
|||
|
|
|||
|
* 断点基于设备宽度。
|
|||
|
* 断点基于内容。
|
|||
|
|
|||
|
### 断点基于设备宽度
|
|||
|
|
|||
|
很明显,我们所有的设备都没有相同的屏幕宽度/尺寸。现在,设计决定包括一组特定设备并相应地编写css规则。我们已经有足够的设备担心了,当一个新的设备出现不同的宽度时,回到你的CSS并重新添加一个新的断点是非常耗时的。
|
|||
|
|
|||
|
这是一个例子
|
|||
|
```
|
|||
|
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
|
|||
|
|
|||
|
/* Portrait */
|
|||
|
|
|||
|
@media only screen
|
|||
|
|
|||
|
and (min-device-width: 375px)
|
|||
|
|
|||
|
and (max-device-width: 667px)
|
|||
|
|
|||
|
and (-webkit-min-device-pixel-ratio: 2)
|
|||
|
|
|||
|
and (orientation: portrait) {
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
/* Landscape */
|
|||
|
|
|||
|
@media only screen
|
|||
|
|
|||
|
and (min-device-width: 375px)
|
|||
|
|
|||
|
and (max-device-width: 667px)
|
|||
|
|
|||
|
and (-webkit-min-device-pixel-ratio: 2)
|
|||
|
|
|||
|
and (orientation: landscape) {
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
/* ----------- Google Pixel ----------- */
|
|||
|
|
|||
|
/* Portrait */
|
|||
|
|
|||
|
@media screen
|
|||
|
|
|||
|
and (device-width: 360px)
|
|||
|
|
|||
|
and (device-height: 640px)
|
|||
|
|
|||
|
and (-webkit-device-pixel-ratio: 3)
|
|||
|
|
|||
|
and (orientation: portrait) {
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
/* Landscape */
|
|||
|
|
|||
|
@media screen
|
|||
|
|
|||
|
and (device-width: 360px)
|
|||
|
|
|||
|
and (device-height: 640px)
|
|||
|
|
|||
|
and (-webkit-device-pixel-ratio: 3)
|
|||
|
|
|||
|
and (orientation: landscape) {
|
|||
|
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
> 通过这种方法,您将获得大量的媒体查询。
|
|||
|
|
|||
|
### 基于内容的断点
|
|||
|
|
|||
|
在制定或编写断点规则时,这是最优选的选择。因为只有在需要更改时才能根据特定布局调整内容。
|
|||
|
```
|
|||
|
@media only screen (min-width: 768px){
|
|||
|
...
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
> 此断点表示当设备宽度为768px及更高时,CSS将应用。
|
|||
|
|
|||
|
#### 您还可以使用断点设置范围,因此CSS仅适用于这些限制。
|
|||
|
```
|
|||
|
@media only screen and (min-width: 768px) and (max-width: 959px){
|
|||
|
|
|||
|
...
|
|||
|
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
**注意** 始终尝试根据您自己的内容创建断点,而不是设备。将它们分解为逻辑宽度而不是随机宽度,并将它们保持为可管理的数字,因此修改仍然简单明了。
|
|||
|
|
|||
|
当您想要根据屏幕大小更新样式时, **CSS断点**很有用。例如,从尺寸为1200px及以上的设备中,使用`font-size: 20px;` ,或者使用`font-size: 16px;` 。
|
|||
|
|
|||
|
我们开始使用的是大于1200px,一个普通的笔记本电脑屏幕的宽度。你可能也注意到我们提到'大于',这意味着我们在某种程度上使用了' **if-then** '语句。
|
|||
|
|
|||
|
让我们把它变成CSS代码:
|
|||
|
|
|||
|
```css
|
|||
|
.text1 {
|
|||
|
font-size: 16px;
|
|||
|
}
|
|||
|
@media (min-width: 1200px) {
|
|||
|
.text1 {
|
|||
|
font-size: 20px;
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
**为方便起见** ,我们首先写下`.text1`基本样式...然后我们将指定`@media`规则。
|
|||
|
|
|||
|
**提示** :您可能会在一个名为“Bootstrap”的常见CSS框架上看到,他们在Bootstrap v4.0中采用了**“min-width”及更高版本** ,而旧版Bootstrap v3.0采用了**“max-width”和向下** 。 这只是一个**偏好** ,并且说' _这个_尺寸而不是'与' _这个_尺寸和大于'相比没有错。
|
|||
|
|
|||
|
使用`@media (max-width) {}` 。这是一个例子:
|
|||
|
|
|||
|
```css
|
|||
|
.text1 {
|
|||
|
font-size: 20px;
|
|||
|
}
|
|||
|
@media (max-width: 1199px) {
|
|||
|
font-size: 16px;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
```css
|
|||
|
// Normal, basic styles
|
|||
|
// that look great on small screens
|
|||
|
// but not on bigger screens
|
|||
|
body {
|
|||
|
font-size: 16px;
|
|||
|
}
|
|||
|
|
|||
|
// Define a new breakpoint, with a media query.
|
|||
|
// In this case, for when the viewport's width
|
|||
|
// is at least 512px wide.
|
|||
|
@media (min-width: 512px) {
|
|||
|
body {
|
|||
|
font-size: 20px;
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
基于内容而不是设备的断点不那么复杂。这是一个简单的代码片段,当设备的宽度超过`code 700px`大致智能手机屏幕大小时触发
|
|||
|
|
|||
|
```css
|
|||
|
@media only screen and (min-width: 700px) {
|
|||
|
something {
|
|||
|
something: something;
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
您还可以设置最小和最大宽度,让您使用不同的范围进行实验。这个大致触发了smar-phone和更大的桌面和显示器尺寸
|
|||
|
|
|||
|
```code
|
|||
|
@media only screen and (min-width: 700px) and (max-width: 1500px) {
|
|||
|
something {
|
|||
|
something: something;
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
* [响应断点](https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints)
|
|||
|
* [freecodecamp.org关于使用CSS断点的文章](https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862)
|
|||
|
* [CSS3媒体查询](https://guide.freecodecamp.org/css/css3-media-queries)
|
|||
|
* [定义断点](https://responsivedesign.is/strategy/page-layout/defining-breakpoints/)
|
|||
|
* [CSS技巧:@media查询](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
|
|||
|
* [w3schools:典型的设备断点](https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp)
|