响应式网页设计：CSS单位和值、示例

响应式设计的CSS单位和值

CSS有绝对和相对测量单位。绝对长度单位的示例是cm或px。相对单位或动态值取决于屏幕的大小和分辨率或根元素的字体大小。

PX vs EM vs REM vs Viewport Units用于响应式设计

• PX – 单个像素
• EM – 基于元素字体大小的相对单位。
• REM – 基于元素字体大小的相对单位。
• VH, VW – Viewpoint高度或宽度的百分比。
• % – 父元素的百分比。

新的网页设计师或开发人员可能应该坚持使用像素作为文本，因为它们是CSS中最直接的长度单位。

但是在设置图像和其他元素的宽度和最大宽度时，使用%是最好的解决方案。这种方法将确保组件适应每个设备的屏幕尺寸。

响应式设计示例

下面我们将介绍一些来自不同行业的响应式网页设计示例——并从他们的对错中学习。

1. 在线报纸：纽约时报

手机、平板电脑和笔记本电脑上的《纽约时报》

在桌面上，《纽约时报》的布局让您想起传统报纸，挤满了视觉效果和不同行和列的内容。每个类别的新闻似乎都有一个单独的列或行。

在移动端，它符合单列标准，还将菜单调整为手风琴格式，以便于使用。

2. 博客：The Art of Non-Conformity

移动设备、平板电脑和笔记本电脑上的The Art of Non-Conformity

Chris Guillebeau的博客“The Art of Non-Conformity”十多年来一直很受欢迎。虽然该设计不是最前沿的，但它具有响应性，并将两列侧边栏和主要内容布局调整为移动设备上的单列设计。

3.电子商务：亚马逊

移动设备、平板电脑和笔记本电脑上的亚马逊

亚马逊之所以成为电子商务领域的全球领导者是有原因的，他们的用户界面在所有设备上都非常流畅。

他们的平板电脑布局只是删除了一些空白区域，并添加了一个可滚动的图标部分，以将更多内容放入较小的包中。

他们的移动布局将其集中在一个列中，专注于基本要素，例如最近的购买历史，而不是主页上的不同部分链接图标。

4. 视频网站：YouTube

移动设备、平板电脑和笔记本电脑上的YouTube

YouTube主页设计的核心是与每个用户相关的灵活视频网格。在平板电脑上，每行的列数减少到三。在移动设备上，它被简化为单列设计。

移动版还将主菜单移至屏幕底部，更靠近智能手机用户的拇指。这个简单的举动改善了导航和用户体验。

5. 在线杂志：Wired

在手机、平板电脑和笔记本电脑上Wired

Wired的响应式网页设计方法专注于在所有较小的屏幕上实现单列布局，从平板电脑开始。

这是一个基本布局，但更容易吸引用户关注热门故事和他们的CTA订阅。