无法加载

关于前端网页自适应方案总结

FavoriteLoading收藏

1、个人建议先写PC端再写移动端,PC端正常写就可以了,但注意以下几点可能会有很好的效果。

  • 能不设置宽高的尽量不设置,让内容自己撑开
  • 少用float,如果用了记得清除浮动
  • 尽量用flex布局(父盒子设置flex-wrap:wrap,子盒子尽量设置实际宽,少用用百分比)
  • 屏幕宽度大于540建议用媒体查询,屏幕宽度小于540建议用rem(关于rem

2、lib-flexible版本

  • 0.3.2版本:当屏幕宽度小于540进行等比例缩放,当屏幕宽度大于540将不进行缩放,并以540为基准(个人建议使用),有特殊情况也可以下载flexible.js文件到项目,修改flexible.js文件源码中屏幕宽度540的限定。
  • 2.0版本:根据屏幕宽度全程等比例缩放网页

3、原生静态页面

  • 将flexible.js下载至本地并引入项目
  • 推荐vscode插件px to rem & rpx (cssrem):以自己设置基准将px计算为rem,在设置->插件->Root Font Size设置自己当前屏幕宽度/10的值(例:当前屏幕宽度为1440,则设置144)

4、vue项目

  • 安装lib-flexible
  • 在main.js引入 
import 'lib-flexible/flexible'
  • 安装postcss-plugin-px2rem
  • 在vue.config.js配置
module.exports = {
    css: {
      loaderOptions: {
        stylus: {
          'resolve url': true,
          'import': [
            './src/theme'
          ]
        },
        postcss: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 37.5, //换算基数,rootValue的值应该设置为你当前开发下屏幕的宽度/10(例:屏幕宽度为375,则设置为37.5),之后就可以在css直接使用px,插件会自动转换成相应的rem。
              // exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
              // selectorBlackList: [], //要忽略并保留为px的选择器
              // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
              // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
              mediaQuery: true, //(布尔值)允许在媒体查询中转换px。
              minPixelValue: 1 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ]
        }
      }
    }
  }

接下来可以使用px,打开浏览器调试工具看看是否转换成rem单位了

留下评论

微信:15182814906

QQ:1548902957

邮箱:1548902957@qq.com