移动端的屏幕适配

1. 前端能够写出一套代码，由这样的功能
   • 平步比较小的手机，看到的页面元素就越小
   • 屏幕比较大的手机，看到的页面元素就越大

这两个公式都可以用，换上已知的单位，进行计算！

为什么常用下面的公式，因为数学的符号等级是先乘除。如果用第一个公式还得用一个括号包起来，没必要多此一举。所以下面的公式直接顺序补上数值就可以算出来了。！！！

算法等级原因才用 C=AxD/B

C=A/BxD就要用括号包住A和B。因此采用上面那个公式

计算calc公式

• 运算符两侧一定要加空格！
• 运算符两侧一定要加空格！
• 运算符两侧一定要加空格！

rem单位

• rem单位是相对长度单位（需要找到参照物）
  • 参照根标签（html）的fontsize
  • 跟标签的字体大小=1rem字体像素
  • 比方（跟标签）html:font-size:100px(根标签的字体大小)
  • 所以：1rem的像素就是100px

1. 如果不设置html 的字体大小
   • 1rem=16px（谷歌浏览器默认字体的大小是16px）
2. 如果设置了html的字体大小 设置为1px
   • 1rem=1px？
   • 但是对于字体来说 最小还是12px（只针对于谷歌），火狐最小文字1px
3. 小结
   1. rem大小是相对于页面根标签的字体大小
   2. 不要去研究rem小于12的时候情况，自己设置尽可能将rem设置为大于等于12的像素，避免这样的情况发生就行了。

rem和vw的区别：

本上说。rem的作用和vw一样，也是用来解决移动端屏幕适配

1. vw做屏幕适配
2. rem做屏幕适配
3. 目前公司中两种方案都有在使用
4. 如果让我来选择，我会选择简单方便的vw
5. 但是工作当中，我 只是一个小弟而已，领导或者团队用rem。我只能说 好的。
6. rem使用仅仅是比vw要麻烦一点点而已。

思考：如果使用rem做单位适配？

• 我们目前能实现效果的方法是引入一段 手机淘宝写好的js代码
• （flexible.js）(学习如何引入js代码)
• script sre= ./flexible.js /script
• script:脚本的意思 引入js的文件。
• 以下图文

3

1. 10倍根标签的字体大小 = 屏幕的宽度
2. 根标签的字体大小 =1 rem
3. 10rem=10倍根标签的字体大小 =屏幕的宽度
4. 10rem=屏幕的宽度

细节注意

必须要引入js脚本文件

移动web总结

今日最重要的一条公式

要适配的元素宽度=屏幕的宽度 X 设计稿中元素的宽度 / 设计高宽度

两个单位的插件

1. vw px2vw
2. rem px to rem&rpx（csrem）