CSS转换的故意断点 - 北京传诚信

      CSS转换的故意断点

响应式网站设计不仅仅是HTML和CSS中的几行代码。这是一种构建网站的方法，需要我们考虑整个用户体验。这意味着接受用户不会按照我们希望的方式使用网站。如果他们可以打破它，他们会。他们将使用过时的浏览器，缓慢的互联网连接，放大和缩小，以及调整浏览器的大小。我们的工作不仅要为这些场景做好准备，还要围绕它们添加周到的设计。一种方法是使用CSS转换。

媒体查询允许我们在各种屏幕分辨率下更改布局，换出图像和更改文本大小。但是，如果从一个断点移动到另一个断点，单独的媒体查询可能会产生非常刺耳的效果。这可以通过调整浏览器大小，放大和缩小，或将设备从横向旋转到纵向。在响应式网站中引入CSS转换和媒体查询可以消除这些断点，使得一些设计决策看起来不像是错误而且更有意。

CSS过渡入门

在响应式网站中开始转换的最佳方法是将属性添加到样式表中的正文，并定位所有样式。

body {

-网站kit-transition:all .5s ease-in-out;

-moz-transition:all .5s ease-in-out;

-o-transition:all .5s ease-in-out;

transition:all .5s ease-in-out;

}

本质上，这些少量代码所做的是为所有正文样式添加一个很好的过渡效果，因为它从原始状态更改为媒体查询中定义的新状态。我选择了0.5秒的持续时间和轻松输入的转换计时功能，但您可以使用这些设置来获得所需的结果。

定义ems中的所有文本（响应式网站设计中类型的首选度量单位）非常重要，因此一切都与身体相关。这确保整个响应式网站中的其余文本将按比例缩小，从而创建一个有凝聚力的过渡效果。

虽然这是一个很好的开始，但有时将过渡属性添加到定位所有样式的主体并不能给我们足够的控制。如果我们不一定希望所有样式都能过渡怎么办？在这种情况下，我们会将“all”替换为您要添加转换的特定样式，以逗号分隔。

body {

-网站kit-transition:font-size .5s ease-in-out;

-moz-transition:font-size .5s ease-in-out;

-o-transition:font-size .5s ease-in-out;

transition:font-size .5s ease-in-out;

}

同样，单独的身体元素并不总是最终都是。继续探索响应式网站中转换的可能性，在受断点影响的其他元素上使用相同的代码。但要避免一些令人头疼的问题，并确保首先阅读哪些元素支持css转换。

当您使用CSS Transitions和Responsive 网站设计时，请确保您的设计决策能够增加整体用户体验，而不是从中消除它。过度延迟和转换时序功能过分可能会产生性能缓慢的错觉，而且实际上与“响应式网站设计”完全相反。相反，专注于使CSS过渡变得微妙和有目的性。