如何实现 font-size 的响应式潭州学院清心老师推荐4.docVIP

如何实现 font-size 的响应式 潭州学院清心老师推荐 本文样式代码采用 SCSS。 那么多的文章讲了响应式的网站如何布局，使用 CSS 如何实现，如何 Blah Blah 的。但是，我们都忘了很重要的一点——对字体大小的响应式控制。 现在的很多网站，从布局上来说，尽管是响应式的(当然，或许可以说成所谓响应式的)。但是，从字体上来说，却不一定是响应式的。虽然，每个网站可能会通过某些方式(比如频繁使用 @media )来让自己的网站在不同的屏幕大小下显示不同大小的字体，但是，这样不能叫做响应式，这只是一种适应式的做法。 那么，怎么样才能对我们的 font-size 实现真正的响应式呢？ 我们需要做的主要有以下两点： 1、制定一个最大的和最小的屏幕宽度值，我们的 font-size 应该是在这个屏幕范围内平滑均匀的变化； 不可能让字体大小一直不停的变化。试想一下，自己一直缩小或者方法浏览器，字体一直变小或者变大的场景。 2、制定最大和最小的 font-size，屏幕大小小于最小的屏幕宽度值的时候，应用最小的 font-size，反之，应用最大的 font-size； OK，计划制定好了，那么，应该如何实施呢？我们需要用到哪些技术呢？ 其实要用到的技术不多，只是，我们需要把脑子转一下。 @media：CSS Level 3 提供的媒体查询，只要做过响应式，或者任何适应屏幕功能的肯定用过这个属性。所以，在此不过多解释此属性，详细可查看 @media | MDN vw：Viewport 单位，1vw 相当于屏幕宽度的百分之一。此处也不过多解释，详细可查看 length | CSS calc：这是 CSS 提供的一个非常强大的属性，可以用来动态计算 CSS 的值。我们的功能主要就是通过这个函数来实现。详细可查看 calc | MDN OK，需要的技术也齐全了。那么，现在就来一步一步实现。 定义变量 按照上文中所说的计划那样，我们需要定义四个值，他们分别是最小屏幕宽度，最大屏幕宽度，最小字体，最大字体。 $min-font-size: 14px; $max-font-size: 18px; $min-screen: 600px; $max-screen: 1200px; 不过，使用 px 来定义字体大小显得不是很优雅，我们可以使用 rem 来定义我们的字体。那么，这时候，就需要先对网站的根元素设置字体大小了。 :root { font-size: 10px; } 然后，再来更新我们的变量。 $min-font-size: 1.4rem; $max-font-size: 1.8rem; $min-screen: 600px; $max-screen: 1200px; 我们把我们的变量定义和根元素的 font-size 放在文件的顶部。在这里，我们就不写那些相关的 reset 等样式了。 加入测试内容 起了个好头，然后进行下一步，很简单，写我们的 HTML，此处不做过多赘述。 header h2This is Header./h2 /header section article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /article /section 使用 @media 对限制字体大小边界值 上文中说过，在我们的屏幕宽度小于 600px 的时候，字体大小为 1.4rem，屏幕宽度大于 1200px 的时候，字体大小为 1.8rem。这个功能实现起来很简单，只需要应用相应的一小段媒体查询就行了。 @media (min-width: $max-screen) { article { font-size: $max-font-siz