移动web第六天

移动端的屏幕适配 vh vw

1. 屏幕比较小手机 ， 看到的页面元素就越小
2. 屏幕比较大手机 ， 看见的页面元素就越大

观察它 在不同宽度下的页面元素的变化，页面元素 图片，文字 大小都是一样！！！没有实现需求

1. 因为写页面的时候 单位px单位

2. px是绝对长度单位 大小固定不变

3. 想要实现屏幕适配需求 重点就在于 单位上

   只能选择相对长度单位 vw最简单和最容易！！！

适配屏幕的计算方式

1. 要适配的手机宽度 未知

2. 设计稿的款 知道

3. 要适配的手机的 div宽度 未知

4. 设计稿中的div的宽度 知道

安装px2vm插件

rem 移动端适配

1. rem单位 是相对长度单位 （找到参照物）

参照的 根标签（html）的fontsize

2. 如果 自己不设置HTML的字体大小

   1rem =16px（谷歌浏览器默认的字体大小是16px）

3. 如果 设置了 html'的字体大小 设置为 1px

   1 rem = 1px？

   但是对于字体来说 最小还是 12px （谷歌） 火狐 （最小文字1px）

4. 小结

   1. rem 大小是相对于页面跟标签的字体大小
   2. 不要去研究 rem小于 12的时候的情况（自己设置尽可能将rem 设置为大于等于12 避免问题即可）

rem js 引入

• 我们想要实现的效果是 屏幕的宽度改变 -> html 的fontsize发生改变

  1. 引入一段 手机淘宝写好的js代码 （flexible.js） （学习如何引入js'代码）

2. 10倍跟标签的字体大小 = 1rem

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

4. 10rem = 屏幕的宽度