我的移动web学习第六天

152 阅读2分钟

vw/vh+rem+运算插件+高亮快捷键

vw/vh单位

vw:相对长度单位 相对于视口宽度 100vw是视口宽度

vh:相对长度单位 相对于视口高度 100vh是视口高度。

vw,vh移动端屏幕适配:

需要适配的手机的屏幕(750)/ 设计稿的宽度(375)= 要适配的屏幕中的div的宽度(200)/ 设计稿中div宽度(100)

1647831203409.png

calc()属性值:

括号里面的值可以计算,计算单位可以不一样,但是运算符两边要有空格。

width: calc(50vw - 40px);

rem单位:

  1. rem单位 相对长度单位 参照根标签(html)的font-size

  2. 如果自己不设置html的字体大小,1rem=16px(谷歌浏览器默认的字体大小是16px)

  3. 如果设置了html的字体大小,设置为多少?

    谷歌浏览器显示的字体大小是12px, 火狐的是1px

rem的屏幕适配:

要想让元素随着屏幕的大小发生改变需要改变html的字体大小

1648019302601.png

想要让元素随着屏幕的大小发生改变需要改变html的字体大小,需要引入手机淘宝团队研发的 js 代码文件(即flexible.js文件)

引入 flexible.js文件 后屏幕宽度和html的字体大小关系:

10倍根标签的字体大小 = 屏幕的宽度

根标签的字体大小 = 1rem

10rem = 10倍根标签的字体大小 = 屏幕的宽度

10rem = 屏幕的宽度

vscode设置插件快速运算:

微信图片_20220323145255.png

设置typora高亮快捷键:

  1. 选择文件里的偏好设置

1648021215311.png

  1. 选择通用的打开高级设置

1648021304759.png

  1. 打开高级设置后,文本编辑器自动打开conf.user.json,在conf.user.json里的 "keyBinding"{} 里修改,高亮修改是: "Highlight",后面写 冒号 + 快捷键 ,快捷键要加双引号

1648021630290.png

  1. 重启typora