响应式文字
Posted jinsuo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式文字相关的知识,希望对你有一定的参考价值。
在移动端可以做到适配不同的手机分辨率,如果保持整体缩放,没有设计上的差异可以不需要用到`media query`
假设设计师的视觉稿是按照iPhone6的宽度来设计的,即375px (如果是高清的视觉稿750/2=375)
那么,我们可以完全按照视觉稿上的尺寸来赋值给元素的样式,比如视觉稿上的尺寸是80px,那么在css中就可以直接定义width:80px; 页面中所有的尺寸都这样来设置。
当所有的网站所有的页面样式都设置好之后。
我们需要做两件事情:
1. 设置页面的rem大小
```css
```
100vw是设备的宽度,除以3.75可以让1rem的大小在iPhone6下等于100px
2. 替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的80px,就是0.8rem
这样在iPhone6下,所有元素的尺寸还是和视觉稿的尺寸一样,而iphone5中,因为设备的宽度变小了,100vw/3.75得到的值,会相应的变小,即rem的单位值会变小,页面中所有的尺寸会等比例缩放。
这样就可以做到针对任何分辨率的设备保持视觉一致了。
最后,前面用到vw单位,但是低版本的设备可能不支持,那么就需要js来处理一下:
```javascript
```
之所以前面让1rem等于100px,而不是1rem等于1px,是因为在chrome下针对中文的最小字体是12px。
当然,这种步骤是针对现在的状况改rem来做的,如果一开始就是使用rem,那么写css的时候,可以直接写rem单位,按视觉稿除以100,其实也没有什么计算过程。或者用预处理器的话,也可以写一个`px2rem`的函数,直接改这个函数就可以了。
假设设计师的视觉稿是按照iPhone6的宽度来设计的,即375px (如果是高清的视觉稿750/2=375)
那么,我们可以完全按照视觉稿上的尺寸来赋值给元素的样式,比如视觉稿上的尺寸是80px,那么在css中就可以直接定义width:80px; 页面中所有的尺寸都这样来设置。
当所有的网站所有的页面样式都设置好之后。
我们需要做两件事情:
1. 设置页面的rem大小
```css
html {
font-size: calc(100vw/3.75);
}
100vw是设备的宽度,除以3.75可以让1rem的大小在iPhone6下等于100px
2. 替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的80px,就是0.8rem
这样在iPhone6下,所有元素的尺寸还是和视觉稿的尺寸一样,而iphone5中,因为设备的宽度变小了,100vw/3.75得到的值,会相应的变小,即rem的单位值会变小,页面中所有的尺寸会等比例缩放。
这样就可以做到针对任何分辨率的设备保持视觉一致了。
最后,前面用到vw单位,但是低版本的设备可能不支持,那么就需要js来处理一下:
```javascript
document.documentElement.style.fontSize = window.innerWidth/3.75 + ‘px‘
之所以前面让1rem等于100px,而不是1rem等于1px,是因为在chrome下针对中文的最小字体是12px。
当然,这种步骤是针对现在的状况改rem来做的,如果一开始就是使用rem,那么写css的时候,可以直接写rem单位,按视觉稿除以100,其实也没有什么计算过程。或者用预处理器的话,也可以写一个`px2rem`的函数,直接改这个函数就可以了。
以上是关于响应式文字的主要内容,如果未能解决你的问题,请参考以下文章
html 将以编程方式附加外部脚本文件的javascript代码片段,并按顺序排列。用于响应式网站,其中ma
Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre)(代码片段