css改为以rem为单位后网站的体验更好

大家好我是图恩,前两天更新了网站的样式显示单位,首页跟文章详情页面都改成了以rem为单位,改单位原因是因为网站在手机上看上去字体相对较小,至少在ios跟macos上系统是比较小的,标题跟文章字体大小都比正常看起来要小一些,用外接显示器可能差异会小一些。

但是用原生的屏幕看感觉就会明显一些,为了体验更好一些就稍微改动了一下,花的时间并不多。

熟悉开发的朋友可能会知道rem是一个相对根元素的单位,也就是说只需要在设置网页的body/html元素的font-size大小后,再具体给其他元素设置以这个大小为基准的大小即可。

比如我设置body的font-size为16px,那个此时如果我需要设置一个div的宽度为16px,那个我只需要写成1rem即可,这个单位对字体大小也生效,所以常常用在一些移动端的适配上效果会好一些。

修改完成后在手机跟电脑上看了一下效果显示终于正常,一个小小的优化可能就会带来更好的体验,每次进步一点点。

今天还在个人博客上看到一个暗黑模式的设置方法,虽然越来越多的网页跟app都适配了暗黑模式,但是感觉在平常见到的网页里面还是比较少。

其实主要还是适用场景较少,一个网站要适配另一风格,需要适配各种场景,文字、图片、背景等等都需要考虑适配,如果考虑不全面有遗漏的情况下,有可能就是文字跟背景颜色不匹配导致看不清。

适配的问题最主要的还是一个成本的问题,一个网站要实现这个模式,从成本上就需要投入不小的开支,而且投入后并不能看到直接的效果,毕竟有这个需求的人仅仅是一小部分,投入产出不成正比,而且即使不适配也不会影响用户正常的访问,可能这就是大部分的网站并没有及时跟进这个功能吧,当然对于新的网站跟app来说没有这个包袱可以及时跟进,对于想我这样的小网站来说就没有什么必要了。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):