### 一、百分比单位
使用百分比作为容器或者元素的width属性值是一种常见的做法：
css
.container {
width: 80%;
}
上述代码会使得`.container`元素占据父级容器宽度的80%。这种方式非常适合创建流体网格系统，在不同屏幕分辨率下都能按比例缩放自身宽度。
### 二、 viewport 单位 vw 和 vh
现代CSS3引入了vw (viewport width) 和vh (viewport height)，它们分别表示当前视窗宽度和高度的1%，非常适用于移动端适配及全屏背景的设计需求:
css
.content-area{
width: 95vw;
}
.header-image{
height: 60vh;
}
在这段示例中，《content-area》将会始终填充设备可视区宽度的95％；《header-image》的高度则固定为可见视口高度的60％。
### 三、媒体查询(Media Queries)
对于更为复杂的响应式设计，可以结合@media规则根据不同设备视口宽度应用不同的样式：
css
/* 当视口宽度小于等于600px时 */
@media screen and (max-width: 600px){
.sidebar {
display:none; /* 隐藏侧边栏 */
}
.main-content {
width: 100%; /* 主要内容撑满整个屏幕宽度 */
}
}
/* 视口大于600px的情况 */
@media screen and (min-width: 601px){
.sidebar {
width: 25%; /* 显示并设置侧边栏宽度占四分之一屏幕宽 */
}
.main-content {
width: calc(75% - 40px); /* 设置主要内容区宽度为其余空间减去一定间距 */
}
}
在这个例子中，我们针对两种主要的屏幕断点进行了优化：当用户是在小屏幕上浏览网站时，隐藏掉侧面导航条并将主内容填充满全部可用的空间；而在较大屏幕上，则恢复显示侧边栏并对两者合理分配宽度。
综上所述，利用好各种CSS技巧能有效帮助我们在项目开发过程中应对各类场景下的网页宽度问题，从而达到良好的跨平台兼容性和用户体验。这不仅限于基础的宽度定义，还包括更深层次的响应式设计理念实践。