前端适配方案

原创已于 2022-09-29 11:54:05 修改 · 4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html

于 2022-09-29 11:48:46 首次发布

一、大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160和其他

二、css方案选择:

1、字体大小以 “相对单位rem” 为单位更合适(以 1920*1080 的设计稿为基本尺寸设置 rem 值)(字体相对单位)

2、大的布局的宽高以 “相对单位vh,vw” 为单位更合适(视窗相对单位,高宽占满)

3、内容的布局使用%,display:flex 更合适

4、需要单个调整的，媒体查询最合适

三、适配插件

1, rem

原理：

// 方法一、根元素的字体大小设置成固定值
// 第一步：规定1rem = 100px 注：也可以是20px或者其他
// 第二步：根据 375px(设计稿的宽度)/width(当前视口的宽度) = 100 / x 计算出当前尺寸下的屏幕需要设置的根节点的rem值
// 元素宽高直接写rem 设计稿上的px值/100
<!DOCTYPE html>
<html lang="en" style="font-size:100px">
  <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" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />    
    <style>      
      
    </style>
  
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
     <script>
      document.documentElement.style.fontSize = 100 * document.documentElement.clientWidth / 375 + 'px'
      window.onresize = () => {
        document.documentElement.style.fontSize = 100 * document.documentElement.clientWidth / 375 + 'px'
      }
    </script>
  </body>
</html>

flexible.js 适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕

1.安装lib-flexible.js

npm install lib-flexible --save

2.在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible/flexible'

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

注意：

1.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。

2.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem。

3.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用px2rem-loader自动将css中的px转成rem

使用webpack 的px2rem-loader,自动将px转换为rem

npm i -D postcss-px2rem postcss-loader

在postcss.config.js文件配置

module.exports = {

plugins: {

'postcss-2rem-exclude': {

remUnit: 75, // 相当于1rem = 75px

exclude: /node_modules

}

}

}