vw-vh移动适配
移动端的屏幕适配
前端写出一套代码是有功能性的
屏幕小,看到元素小
屏幕大,看到的元素大
想要实现 屏幕适配需求 重点在 单位上
VW-VH 最简单和最容易
要适配的手机屏幕 / 设计稿的宽度 = 要适配的DIV / 设计稿的DIV
*要适配的手机DIV宽=(要适配的屏幕=100vw) 设计稿DIV宽 / 设计稿宽
当图片需要添加其他元素,如小东西等,就可以用DIV套盒子,做伪元素
REM移动适配
rem的作用
rem的作用和VW是一样的 也是用来做移动端适配的
工作中 两种方案都在使用 所以都需要掌握
如何使用REM做适配
设置HTML根标签字号,从而改变设置rem页面的宽度
@media (width:320px) {
html {
font-size: 32px;
}
}
1rem=32px
10rem=屏幕的宽
1rem=1HTML字号大小
思考
屏幕宽度的改变 ,页面的HTML标签字体没法自动发生改变 ,这个时候一个一个写,非常麻烦。从而不能很好的改变使用了REM的页面宽度。
引入一段手淘团队的JS代码,解决屏幕宽改变控制屏幕根标签字体发生改变。
<!-- 脚本的意思 -->
<!-- 引入JS代码 -->
<script src="./js/flexible.js"></script>