移动端适配

最新推荐文章于 2024-05-07 15:15:45 发布

学无止境s

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量515

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_65382120/article/details/126295207

版权

一、百分比

不推荐使用

二、rem+动态html的font-size

首先rem是根据html的font-size来决定大小的

二.1、所有我们可以采用媒体查询来改变font-size

缺点：1.写大量媒体查询 2.无法实时改变

解决这个问题：通过js来实时改变

二.2、通过js来实时改变，默认字体在body里面设一下就可以

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 5rem;
      height: 5rem;
      background-color: orange;
    }
  </style>

  <script>
    // 1.拿到html
    const htmlEl=document.documentElement
  
    function setRemUnit(){
       // 2.拿到html宽度
      const htmlWodth=htmlEl.clientWidth
      // 3.屏幕宽度除以10，计算html的font-size的大小
      const htmlFontSize=htmlWodth/10
      // 4.设置html的font-size值
      htmlEl.style.fontSize=htmlFontSize+'px'
    }
    // 5.解决第一次没有值的问题
    setRemUnit()
    // 6.给window加一个事件监听，屏幕发生变化时，实时修改尺寸
    window.addEventListener('resize',setRemUnit)
  </script>
</head>
<body>
  <div class="box">
  </div>
</body>
</html>

二.3、通过github上的库lib_flexible(推荐使用，里面考虑了0.5px、一些前进后退这些问题)

接下来解决到底设置多少rem值

比如这里，到底设置多少呢

1.手动计算知道就行

假如需要100px, 就用 100除以上面的 const htmlFontSize=htmlWodth/10

也就是 100/屏幕宽度的10分之一

2.less混入或者sass函数知道就行

3.使用插件 postcss-pxtorem (推荐使用)

使用了，该写什么就写什么：比如宽要100px就写100px，打包的时候会自动换算

4.借助vscode插件 px to rem & rpx & vw(cssrem) （需要自己配置一下设计稿大小）

三、vw vh

用vw可以直接淘汰rem

单位换算也是手动，less这几种方法，插件 postcss-px-to-viewport-8-plugin

vscode也是用那个插件去配置一下设计稿

对比rem优势

缺陷：根据视口变大

四、flex布局

学无止境s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端适配

4.借助vscode插件 px to rem & rpx & vw(cssrem) （需要自己配置一下设计稿大小）二.3、通过github上的库lib_flexible(推荐使用，里面考虑了0.5px、一些前进后退这些问题)单位换算也是手动，less这几种方法，插件 postcss-px-to-viewport-8-plugin。使用了，该写什么就写什么：比如宽要100px就写100px，打包的时候会自动换算。首先rem是根据html的font-size来决定大小的。解决这个问题：通过js来实时改变。..
复制链接

扫一扫