移动web第六天

124 阅读1分钟

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>