写一个组件，首先要考虑的是 这个组件如何被使用？水印组件我想到的有两种方式。第一种是当作一个标签，和元素无关。 但是，这样做有一个缺点就是我这个水印默认就是覆盖了我所有的页面，当我想精细化控制我的页面的时候，就显得无能为力。第二点，<Watermark /> 组件放在外部看起来…

在做web端项目的时候，ui通常给的设计稿是1920px，但是我们前端在开发时，就要考虑小屏下内容区域是否可以自适应，不出现遮挡或溢出情况。 1、下载flexible.js 2、引用 在这里需要考虑，

自适应的问题 屏幕像素大小不同，统一表现 画面比例不同，统一表现 浏览器字体最小限制，不可能无限等比缩小 画面出现拉伸压缩 文字内容显示异常 画面出现空白区域 一. css缩放方案： 利用transf

在拿到设计图后，通常会先通过设计图的布局来思考代码的设计，这也是开始着手写代码前必须要进行的一步，在项目中，我曾遇到，在一张大屏图开发到一半的时候介入，和另一个前端一起进行开发，结果由于她将整张图上的所有图表都放到一个vue文件里面，结果导致整个页面的代码数量级达到上千行，并且…

lib-flexible：用来响应式改变根元素的字体大小。px2rem-loader： 用来原生的css的px转成rem。postcss-plugin-px2rem：对于前端预处理器的px转成rem

Vue移动端适配 写在前面 使用到的两个工具介绍 工具一：lib-flexible —— 用于自动设置 rem 基准值 工具二：postcss-pxtorem —— 是一款 postcss 插件，用于

1px问题 原因 解决方案 方案一 和设计师沟通，让设计稿中避免出现1px的值 优先沟通，从问题的根源解决 方案二 通过各种方式去兼容 方式一：伪元素 + transform: scale()缩放 原

本文主要从flexible的源码开始解析，其实际场景的应用，为何目前不推荐继续使用flexible而推荐使用viewpoint，以及他们的区别。

前言 H5 移动端 开发的必不可少的一个环节就是 移动端网页的适配，因为 UI 通常只会提供 大小固定的设计稿，而各种不同移动设备具有不同的页面分辨率和大小，所以适配的目的就是让一份设计稿在不同移动设