做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存…

在App.vue文件中直接放入以下代码即可 <template><div id"app"><router-view></router-view></div> </template> <script> export default {data() {return {};},mounted: function () {// 页面开始加载时修改font-sizev…

公司项目做之前没有沟通好&#xff0c;按照1920*1080设计图做的页面&#xff0c;缩放比是100%&#xff0c;项目做完之后说要适配缩放比&#xff0c;并且工控屏&#xff08;分辨率1024*768&#xff09;&#xff0c;需要做小屏适应。 开发中一般pc端都是不用怎么考虑去适配屏幕的…

网上有很多Vue3.0 + vite 自适应PC端的文章，我也尝试过其他方式，只有这种方式在我项目中没出现各种各样的问题。遂，先把这种方式记录下来，以下是步骤： 1、下载包 npm install lib-flexible-computer postcss-px2rem px2rem-loader --save 2、在main.ts里引入 import …

设计稿1980 * 1080 安装依赖 "postcss-pxtorem": "^6.0.0" vue.config.js 中配置 代码如下&#xff1a; css: {loaderOptions: {postcss: {postcssOptions:{plugins: [//require(postcss-pxtorem)({rootValue: 16,selectorBlackList: [weui, mu], // 忽…

<meta charset"utf-8" name"viewport" content"widthdevice-width, initial-scale0.1, maximum-scale5.0"> 将上面代码放入head中即可

自适应布局 * midea 媒体布局 * flex 布局 * %百分比布局 * rem 布局 * vw、vh 布局 局部自适应 接手他人的项目&#xff0c;把某个页面改为自适应的&#xff0c;若用插件&#xff0c;就要动配置文件&#xff0c;导致 全部的页面都要检查和调整&#xff0c;代价大。 根据…

目录 第一步&#xff1a;安装插件第二步&#xff1a;装好之后在main.js 里引入 lib-flexible第三步&#xff1a; 在vue.config.js 中添加配置第四步&#xff1a;设置flexible.js的宽度根据屏幕大小自动适配&#xff0c; 修改flexible.js 文件&#xff0c;&#xff08;全局搜索 …