数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学固定宽度设计
在互联网早期，大多数用户都是台式电脑用户。如今，你可以在笔记本电脑、手机、平板电脑、汽车等设备上访问互联网。人们期望网站在所有平台上都能显示良好。在响应式网页设计出现之前，网页开发者和设计师尝试过各种不同的方法，其中一种就是固定宽度设计。
顾名思义，“内容宽度固定”意味着，无论屏幕尺寸如何，内容的宽度始终保持不变。让我们深入了解这篇文章，学习更多关于固定宽度设计的知识。
固定宽度设计
固定布局是一种设计，它从网页设计师指定的特定尺寸开始。无论显示页面的浏览器窗口有多大，它们都保持该宽度。在大多数情况下，固定宽度布局使设计师能够更直接地控制网站的外观。那些有印刷背景的设计师通常更喜欢它，因为它允许设计师对布局进行微调，并在不同的浏览器和电脑上保持一致性。
示例
让我们来看下面的例子，我们将设计一个具有固定宽度的网页。
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 800px;
font-family: verdana;
line-height: 1.6;
padding: 0 15px;
color: #DE3163;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<article>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</article>
</body>
</html>
当我们运行上面的代码时，它将生成一个输出，其中包含应用了CSS的文本以及网页上显示的固定宽度。
使用固定宽度的优点
让我们来看看使用固定宽度的一些优点：
无论画布大小如何，页面的基本结构都保持不变。希望向所有访问者展现统一企业形象的公司可能会认为这是重中之重。
当在宽屏显示器上查看页面时，固定宽度页面和列通过防止行过长，使您能够更好地控制行长。
在较小的显示器上，文本不会因固定宽度组件（如图像）而中断，因为它的宽度等于全页宽度。
固定宽度的缺点
现在，让我们来看看固定宽度的一些缺点：
在较小的浏览器窗口中，固定宽度设计需要水平滚动。大多数人都讨厌水平滚动。
在较大的显示器上，它们会留下大片空白区域，这会留下很多空区域，并且需要比必要的更多的垂直滚动。
固定宽度布局难以适应用户对字体大小的更改。对于字体大小的适度增加，它们可能还可以，但对于大幅度增加，布局可能会受到影响。
示例
在下面的例子中，我们将比较固定宽度和响应式设计之间的区别。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
background-color: #D5F5E3;
width: 600px;
height: 20px;
margin: 200px auto;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.tutorial1 {
background-color: #E8DAEF;
width: 50%;
height: 20px;
margin: 20px auto;
text-align: center;
font-family: verdana;
color: #DE3163;
}
</style>
</head>
<body>
<main>
<div>
<div class="tutorial">WELCOME</div>
<div class="tutorial1">TUTORIALSPOINT</div>
</div>
</main>
</body>
</html>
运行上述代码后，将弹出一个输出窗口，显示文本：一个应用了固定宽度，另一个应用了响应式宽度，显示在网页上。当用户尝试更改窗口大小时，我们将注意到其行为的变化。
浏览量：130
