vw/vh+rem+运算插件+高亮快捷键
vw/vh单位
vw:相对长度单位 相对于视口宽度 100vw是视口宽度
vh:相对长度单位 相对于视口高度 100vh是视口高度。
vw,vh移动端屏幕适配:
需要适配的手机的屏幕(750)/ 设计稿的宽度(375)= 要适配的屏幕中的div的宽度(200)/ 设计稿中div宽度(100)
calc()属性值:
括号里面的值可以计算,计算单位可以不一样,但是运算符两边要有空格。
width: calc(50vw - 40px);
rem单位:
-
rem单位 相对长度单位 参照根标签(html)的font-size
-
如果自己不设置html的字体大小,1rem=16px(谷歌浏览器默认的字体大小是16px)
-
如果设置了html的字体大小,设置为多少?
谷歌浏览器显示的字体大小是12px, 火狐的是1px
rem的屏幕适配:
要想让元素随着屏幕的大小发生改变需要改变html的字体大小
想要让元素随着屏幕的大小发生改变需要改变html的字体大小,需要引入手机淘宝团队研发的 js 代码文件(即flexible.js文件)
引入 flexible.js文件 后屏幕宽度和html的字体大小关系:
10倍根标签的字体大小 = 屏幕的宽度
根标签的字体大小 = 1rem
10rem = 10倍根标签的字体大小 = 屏幕的宽度
10rem = 屏幕的宽度
vscode设置插件快速运算:
设置typora高亮快捷键:
- 选择文件里的偏好设置
- 选择通用的打开高级设置
- 打开高级设置后,文本编辑器自动打开conf.user.json,在conf.user.json里的 "keyBinding"{} 里修改,高亮修改是: "Highlight",后面写 冒号 + 快捷键 ,快捷键要加双引号
- 重启typora