Like many, I’ve been working from home for the last couple of months, and as I’ve been working in my humble home office, with a setup that’s a bit different than the one I would have at the office, I’ve noticed that a lot of websites aren’t fit for my “unusual” main monitor aspect ratio.

与许多人一样，过去几个月我一直在家里工作，而当我在简陋的家庭办公室工作时，设置与我在办公室中使用的设置有所不同，注意到很多网站都不适合我的“异常”主显示器纵横比。

A couple of years ago, I bought an ultra-wide monitor (21:9) for the first time. I liked the way it gave me a bit more horizontal space and made a split-screen set up a bit more spacious. Compared to the 16:9 standard, the difference is quite big. I mainly used this monitor for gaming and only occasionally used it to browse the web.

几年前，我第一次购买了超宽显示器(21：9)。 我喜欢它给我更多水平空间并使分屏设置更宽敞的方式。 与16：9标准相比，差异很大。 我主要将此显示器用于游戏，而偶尔使用它来浏览网络。

My recent frustrations when it comes to how “responsive” a website is, has inspired me to write about it. Granted, when you hear responsive web, the first thing that comes to mind isn’t monitors with unusual aspect ratios, or even monitors, as a matter of fact.

我最近对网站的“响应性”感到沮丧，这启发了我写这篇文章。 的确，当您听到响应式网络时，首先想到的不是显示器具有异常的宽高比，或者实际上不是显示器。

We tend to see responsive as the following: mobile, tablet, laptop/desktop. Every phone essentially fits in that one “mobile” category, every tablet fits in that “tablet” category, and every laptop and computer monitor fits in the last category, and that might be a problem as we move onto an even bigger variety of devices.

我们倾向于看到以下响应：移动设备，平板电脑，笔记本电脑/台式机。 每个电话基本上都属于一个“移动”类别，每个平板电脑都属于该“平板电脑”类别，每个笔记本电脑和计算机显示器都属于最后一个类别，当我们使用更多种类的设备时，这可能是个问题。 。

Shifting towards different aspect ratios

转向不同的宽高比

Let’s start with desktops and laptops. Right now, the default aspect ratio we probably use, and keep in mind while designing or developing for web is either 16:10 or 16:9. The difference between these 2 is negligible and there’s not really going to be anything breaking when switching from one to the other. Resolutions usually range from 1080p, all the way up to 4K.

让我们从台式机和笔记本电脑开始。 目前，我们可能会使用的默认宽高比为Web设计或开发时要记住的是16:10或16：9。 这两个之间的差异可以忽略不计，从一个切换到另一个时，不会有任何损坏。 分辨率通常从1080p一直到4K。

Luckily for us, our operating systems are already doing a great job at scaling, so all websites should look as good on 4K displays as they do on 1080p displays. For high pixel density devices, we might have to provide higher resolution images to be displayed for these displays (see responsive images), but that is about it.

对我们来说幸运的是，我们的操作系统在扩展方面已经做得很出色，因此所有网站在4K显示器上的外观应与在1080p显示器上的外观一样好。 对于高像素密度的设备，我们可能必须为这些显示器提供要显示的更高分辨率的图像(请参阅响应图像)，仅此而已。

Since 2015, quite some monitors have released with an aspect ratio of 21:9, called Ultrawide, as well as 32:9 called Super Ultrawide (because yes, everything bigger and better has to have a “super” in the name). The main reasons these monitors are bought are for productivity and/or gaming. It can give you a lot more horizontal space to work with, when doing almost anything. Writing, programming, video editing, digital art, are all great examples.

自2015年以来，已经发布了许多监视器，其宽高比为21：9，称为Ultrawide，以及32：9的Super Ultrawide(因为是的，所有更大和更好的名称都必须具有“ super”的名称)。 购买这些显示器的主要原因是为了提高生产力和/或游戏性。 几乎可以做任何事情时，它可以为您提供更多的横向空间。 写作，编程，视频编辑，数字艺术都是很好的例子。

These monitors are still very far away from being the standard, but they do exist, and they are here to stay.

这些显示器离标准显示器还差得很远，但是它们确实存在，并且将继续存在。

Smartphones haven’t stayed the same aspect ratio either. Until 2010, smartphones mostly used 3:2 and 5:3 displays, shifting to 16:9, being the most common aspect ratio for monitors at the time already.

智能手机也没有保持相同的宽高比。 在2010年之前，智能手机主要使用3：2和5：3显示屏，而现在已转变为16：9，这是当时显示器最常见的宽高比。

A couple of years later, in 2017, smartphones started releasing with slightly different aspect ratios as well, like 18:9, as well as 21:9. The average smartphone got a bit longer, making it easier to use split-screen apps and accommodate for on-screen navigation buttons, instead of physical ones. Nowadays, some phones don’t even show on-screen navigation buttons anymore, and use gesture-based navigation instead, allowing for even more screen estate.

几年后的2017年，智能手机也开始以18：9和21：9之类的宽高比发布。 普通的智能手机会更长一些，从而更容易使用分屏应用程序并适应屏幕上的导航按钮，而不是物理上的导航按钮。 如今，有些手机甚至不再显示屏幕上的导航按钮，而是使用基于手势的导航，从而提供更多的屏幕空间。

Tablets haven’t really changed that much. When you’re looking to buy a tablet, there are a couple of options. All iPads have a 4:3 aspect ratio, and in the past, a lot of Android tablets had too. Android tablets experienced a shift towards either 16:10 or 16:9, so in the end, there are only 2 prominent aspect ratios here that you have to keep in mind when it comes to tablets. As our phones got bigger, and more powerful over the years, tablet sales have declined quite a bit since it’s peak in 2014, so I doubt we will see a lot of big changes in the next years.

平板电脑并没有真正改变太多。 当您打算购买平板电脑时，有两种选择。 所有iPad的宽高比均为4：3，在过去，很多Android平板电脑也是如此。 Android平板电脑经历了向16:10或16：9的转变，因此最终，平板电脑只有2个突出的长宽比需要牢记。 多年来，随着我们手机的体积越来越大，功能越来越强大，平板电脑的销量自2014年达到顶峰以来已经下降了很多，因此我怀疑未来几年我们会看到很多重大变化。

It’s important to realise that the devices we use are still evolving into devices with different shapes, resolutions and aspect ratios. We might go back and forth a couple of times, if the market isn’t ready for something yet, but there is and always will be a shift in certain directions.

重要的是要意识到我们使用的设备仍在演变为具有不同形状，分辨率和长宽比的设备。 如果市场还没有做好准备的话，我们可能会来回几次，但是确实会一直朝着某些方向转变。

The current situation

目前的情况

We’ve seen quite a lot of changes in the past couple of years. I’ve made a list of some of the important changes that impacted screen estate or aspect ratios:

在过去的几年中，我们已经看到了很多变化。 我列出了一些影响屏幕尺寸或长宽比的重要更改：

• Apple added a notch, which shortly after was also introduced to a lot of Android devices. The notch quickly evolved towards a smaller teardrop notch, or a hole punch, or even no notch, using under the screen front-facing cameras, or popup selfie cameras as seen in quite some phones nowadays.

  苹果增加了一个缺口 ，不久之后它也被引入许多Android设备。 使用屏幕前置摄像头或弹出自拍相机，该刻痕Swift发展成较小的泪滴刻痕，打Kong或什至没有刻痕，这在当今的许多手机中都可以看到。

• Apple also got rid of the physical home button. On-screen navigation had been the standard on most mid to high-end Android devices for a while, but the gesture-based navigation Apple replaced the button for, was also quickly added to a lot of Android phones, later, being integrated into Android to create a uniform gesture navigation system. And thanks to all that, we have more screen space to work with!

  苹果还摆脱了实体主页按钮。 屏幕导航一直是大多数中高端Android设备的标准，但是苹果基于手势的导航取代了按钮，很快也被添加到许多Android手机中，随后被集成到Android中创建统一的手势导航系统。 多亏了所有这些，我们有更多的屏幕空间可以使用！

• Right now we’ve already got foldable smartphones and smartphone-tablet hybrid foldable devices. Not only Samsung, but a lot of other companies have had a go at manufacturing their own foldable device, like LG, Huawei and Motorola. Depending on the demand of these devices, this might become the standard.

  目前，我们已经有了可折叠的智能手机和智能手机与平板电脑的混合可折叠设备。 不仅三星，而且许多其他公司也可以制造自己的可折叠设备，例如LG，华为和摩托罗拉。 根据这些设备的需求，这可能成为标准。

The Samsung Fold, for an example, has 2 displays, the outside display which is a narrow 21:9 panel, and the inside display, which has an aspect ratio of 4.2:3, making it a bit like a conventional tablet.

以Samsung Fold为例，它有2个显示屏，外部显示屏是21：9的窄面板，而内部显示屏的长宽比是4.2：3，这使其与传统平板电脑有点相似。

There are already devices out that fold into multiple aspect ratios and directions. LG even came up with the idea of a “Dual Screen” accessory, allowing for a second display on a phone. Vivo NEX Dual Display is a smartphone with a display on both the front as the back.

已经有设备折叠成多个纵横比和方向。 LG甚至提出了“双屏”配件的想法，允许在手机上进行第二次显示。 Vivo NEX Dual Display是一款智能手机，正面和背面均为显示屏。

• Smart watches and fitness trackers are another thing that come in a lot of different shapes and sizes. Apps have been adjusted to fit these screens, and widgets have been made. Some of the most basic things, people might want to do on their smartwatch or smart band, like setting an alarm, starting a fitness activity, using a stopwatch, answering an email, and so on.

  智能手表和健身追踪器是另一种形式和形状各异的东西。 已对应用进行了调整以适合这些屏幕，并制作了小部件 。 人们可能想在智能手表或智能手环上执行一些最基本的操作，例如设置闹钟，开始健身活动，使用秒表，回复电子邮件等。

• Smart TVs are also pretty common at the moment. They are able to access the web with a built-in webbrowser. Apps are made to look good on a screen that big, making it easier to navigate using just a remote. Having a default aspect ratio of 16:9 makes it relatively easy to fit all the content on the screen, but it’s important to keep in mind that the average TV size is 52 inch.

  目前，智能电视也很普遍。 他们能够使用内置的Web浏览器访问Web。 使应用程序在如此大的屏幕上看起来不错，从而使仅使用遥控器即可轻松导航。 默认的宽高比为16：9可使相对容易地适应屏幕上的所有内容，但请记住，平均电视尺寸为52英寸，这一点很重要。

• With the Internet Of Things it’s also important to notice that these small, mobile and sometimes even miniature devices aren’t always able to display data. To view this data, you will probably have to connect a different piece of hardware, like a phone, a tablet, a custom display (specific size, specific limitations, maybe something like an e-ink display?), a TV or monitor, to display the data. Making the data display responsive, will make it a lot easier to connect up more devices down the line as you upgrade, for an example.

  借助物联网 ，还必须注意，这些小型，移动甚至有时甚至是微型设备并不总是能够显示数据。 要查看此数据，您可能必须连接不同的硬件，例如电话，平板电脑，自定义显示器(特定大小，特定限制，例如电子墨水显示器？)，电视或显示器，显示数据。 例如，使数据显示响应Swift，将使升级过程中更容易地在线连接更多设备。

What will the future bring?

未来会带来什么？

“The power of the web is in its ubiquity. The web’s superpower is its ability to go to more places than any proprietary solution.” — By Brad Frost

“网络的力量无处不在。 Web的超级能力是它能够比任何专有解决方案都覆盖更多的地方。” —布拉德·弗罗斯特(Brad Frost)

It’s hard to predict the future, and creating a future-proof websites and web apps is impossible, but we can try to make them as future-friendly as we possibly can. What used to be “just a website” is turning into a Progressive Web App, that will be installable on millions of different devices, so putting time and effort into making them look good and usable in every way will pay off in the long run.

很难预测未来，并且不可能创建具有前瞻性的网站和Web应用程序，但是我们可以尝试使它们尽可能地面向未来。 从过去的“仅仅是一个网站”就变成了一个渐进式Web应用程序，该应用程序可以安装在数百万种不同的设备上，因此从长远来看，投入时间和精力使它们看起来既美观又可以以各种方式使用。

一些做与不做 (Some do’s and don’ts)

I’ve made a list of do’s and don’ts when it comes to responsive web development.

我已经列出了响应式Web开发的可做与不做的清单。

做 (Do)

• Keep other devices in mindWhen you initially start by setting up your basic structure, whether it be mobile first, or desktop first, make sure you keep other devices in mind. You might run into some problems trying to get the layout to be exactly the way you want it at a certain breakpoint if you picked the wrong structure.

  牢记其他设备最初开始设置基本结构时，无论是先移动设备还是台式机，都要确保牢记其他设备。 如果选择了错误的结构，可能会遇到一些问题，试图使布局完全符合您在特定断点处的要求。

• Try to use as little breakpoints as possible to get started.

  尝试使用尽可能小的断点来上手。

  It sounds counterintuitive, but it’s possible to create a responsive website, without using any breakpoints. Use the breakpoints to your advantage to improve on the basic responsive layout you’ve got without breakpoints.

  这听起来似乎违反直觉，但是可以创建一个响应式网站，而无需使用任何断点。 充分利用断点，可以改善没有断点的基本响应式布局。

• Use maximum widths and heightsDon’t have your content solely depend on the viewport. You can use percentages to set the size of a content box, but add a maximum width and/or height in pixels.

  使用最大宽度和高度不要让内容仅取决于视口。 您可以使用百分比来设置内容框的大小，但可以添加最大宽度和/或高度(以像素为单位)。

• Use responsive image methodsThis will create a better viewing experience for users on high DPI displays, as well as smaller and bigger devices, and it can improve the layout based on the device.

  使用响应式图像方法这将为高DPI显示器以及越来越大的设备上的用户创造更好的观看体验，并且可以根据设备改进布局。

• Use a combination of Flexbox and CSS GridCSS Grid is probably one of my favourite methods to create a responsive website. You select where a section of your website goes into the grid, with media queries you can change the grid as much as you like, and your sections will move accordingly. Flexbox is great to use to position the content in your sections. They work together nicely!

  结合使用Flexbox和CSS网格 CSS网格可能是我创建响应式网站最喜欢的方法之一。 您选择网站的某个部分进入网格的位置，通过媒体查询，您可以随意更改网格，并且您的部分将相应地移动。 Flexbox非常适合用来在您的部分中放置内容。 他们很好地合作！

别 (Don’t)

• Don’t just scale down, scale up too.

  不要只是缩小，也要放大。

  A little less than half of your visitors are using a desktop or laptop, which means they could have unusual screen sizes or orientations.

  不到一半的访问者正在使用台式机或笔记本电脑，这意味着他们的屏幕尺寸或方向可能会异常。

• Don’t just test with the default preset devices in your DevtoolsSet it to “responsive” and try out the craziest aspect ratios. The better it holds up, the longer you won’t have to worry about it

  不要只是在Devtools中测试默认的预设设备，请将其设置为“ respond ”并尝试最疯狂的宽高比。 支撑得越好，您不必担心的时间就越长

Some last notes

最后的一些笔记

As much as responsive web improves the user’s experience, it’s important to keep in mind that this isn’t the only factor. Keep in mind accessibility!

尽管响应式网络可以改善用户体验，但请记住，这不是唯一因素，这一点很重要。 记住可访问性 ！

Your website should respond well to the different types of input, based on the device. Screen readers should be able to know what’s going on, and users should be able to navigate without the default input (no touch, no mouse, no keyboard?) methods as well. Putting effort into this will pay off in the long run, when devices and their input methods change.

您的网站应根据设备对不同类型的输入做出良好的响应。 屏幕阅读器应该能够知道发生了什么，并且用户也应该能够在没有默认输入(没有触摸，没有鼠标，没有键盘？)的情况下进行导航。 从长远来看，当设备及其输入方法发生变化时，付出努力是有回报的。

Thank you for reading my article. Cheers!

感谢您阅读我的文章。 干杯!