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

响应式设计的 CSS 单位和值

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

PX、EM、REM 与响应式设计的视口单位

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

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

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

响应式设计示例

以下是来自不同行业的响应式网页设计的一些示例 - 并从中学习哪些是好的，哪些是错的。

1。在线报纸：手机、平板电脑和笔记本电脑上的纽约时报

《纽约时报》

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

Mobilon 符合单栏标准，并将菜单调整为手风琴格式，以便于使用。

2。博客：不墨守成规的艺术

手机、平板电脑和笔记本电脑上的不墨守成规的艺术

Chris Guillebeau 的博客“不墨守成规的艺术”已有十多年了，随时欢迎您。虽然该设计并不前沿，但它具有响应能力，并将两列侧边栏和主要内容布局调整为移动设备上的单列设计。

3. 电子商务：亚马逊

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

亚马逊成为电子商务领域的全球领导者是有原因的，他们的用户界面可在所有设备上使用。一切都非常顺利。

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

他们的移动布局将所有内容统一在一个列中，并重点关注最近购买历史记录等基本内容，而不是主页上不同部分的链接。

4。视频网站：YouTube

手机、平板电脑和笔记本电脑上的 YouTube

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

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

5。在线杂志：Wired

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

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

这是一个基本的布局，但更容易吸引用户订阅热门新闻和 CTA。