vue 移动端网页适配

最新推荐文章于 2024-03-09 19:55:54 发布
最新推荐文章于 2024-03-09 19:55:54 发布
阅读量269 收藏
点赞数
分类专栏： 适配 文章标签： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovexiaoqiu/article/details/107163987
版权

移动端适配 ，简单的一句话描述就是 ： 最大程度在各个尺寸屏幕上还原设计稿
最关键的是 rem，因为rem可以随根字体大小改变而改变，从而实现了自适应的功能。

最核心的一行代码 : document.style.fontSize = screenWidth / (750 / 32) + ‘px’

screenWidth 是不同设备的屏幕宽度，需要获取。
750 是设计稿，约定俗称的 2倍图。 750对应的 fontSize 正好是 32px.因为375 对应的 浏览器的默认fontSize 是 16px.经过换算后，会得到上面的这个公式。

小秋的漫漫人生路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue移动端html5页面根据屏幕适配的四种解决方法
10-17
在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
VUE页面适配
qq_33951051的博客
02-21 689
VUE 页面适配 // 适配rem (function (doc, win) {   var docEl = doc.documentElement   var resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’   var recalc = function () {     var clientWidth = docEl.clientWidth  
请说明Vue中的移动端适配方法
最新发布
有我更精彩的博客
03-09 920
随着移动设备的普及，移动端适配成为了前端开发中一个重要而又常见的问题。Vue作为一个流行的JavaScript框架，也提供了多种移动端适配的方法，帮助开发者更好地适配不同尺寸和分辨率的移动设备。接下来我们将探讨几种在Vue中常用的移动端适配方案。
（vue）移动端适配
weixin_46262596的博客
12-30 73
1使用postcss-pxtorem 1安装lib-flexible npm i lib-flexible --save 2、在main.js引入lib-flexible import 'lib-flexible/flexible' 3、安装postcss-pxtorem npm install postcss-pxtorem -D 4、配置postcss-pxtorem 在根目录的.postcssrc.js文件中修改 此文件自动生成，若没有，手动添加 module.exports = { "p
vue移动端适配
m0_73202019的博客
07-23 1043
1. amfe-flexible 设置 rem 的基准值（即）不支持设置动态 viewportWidth ，就无法同时支持宽度是 750px 的设计搞 + Vant。2. postcss-pxtorem 是一个 PostCSS 插件，将 px 转为 rem。Vant 的设计稿宽度是 375px，但我们的设计稿宽度大多是 750px。不支持 PostCSS 8。字体不转换，保持 px 单位。一.vw 方案（推荐）
vue移动端屏幕适配详解
10-17
主要介绍了vue移动端屏幕适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3移动端适配的解决方案（老方案）
12-01
用于《vue3移动端适配的解决方案》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/127734001
vue移动端适配完美解决方案demo.rar
04-21
vue移动端适配问题,px自动转换vw,跟设计稿直接计算匹配,非常方便准确 免c币下载地址 https://download.lllomh.com/cliect/#/product/F421745961449998
vue 移动端适配方案详解
11-29
标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。） [removed] (function () { // 在标准 375px 适配下，100px = 1rem; var baseFontSize = 100; var baseWidth = 375; var set = ...
vue 移动端适配
IT_iosers的博客
09-11 120
"postcss": { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { "utf8": false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { "v.
Vue 移动端适配
weixin_44425559的博客
05-03 94
1.安装vue插件 lib-flexible npm i lib-flexible --save-dev 2. 在main.js 引入 lib-flexible import 'lib-flexible/flexible' 3. 安装vue 插件 px2rem-loader npm i px2rem-loader --save-dev 4. 配置 px2rem-loader 在build文件中找到util.js，将px2rem-loader 添加到cssLoaders 下面，如： cons
Vue移动端viewport设置和解决点击响应延时0.3s问题
weixin_30394669的博客
08-19 392
一、viewport <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,u ser-scalable=no"> 二、解决点击响应延时 0.3s 问题 <script src="https:/...
vue适配移动端
weixin_38673922的博客
07-07 129
vue-cli搭建好项目框架后，在目录结构的index.html文件中添加如下代码： fnResize() window.onresize = function() { fnResize() } function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth if(deviceWidth >= 750) { deviceWid
vue项目中移动端的适配
一只琪琪子的博客
11-08 1556
1、安装插件 ①安装 px2rem-loader（作用：通过配置基准，实现将px自动换算成rem） npm install px2rem-loader --save； ②安装lib-flexible（作用：根节点会根据页面视口变化而变化font-size大小） npm install lib-flexible --save; 2、配置utils.js文件（打开build文件夹下面的utils.js文件） 在当前文件中，找到下边的generateLoaders (loader, loaderOption
vue实现移动端适配
一个努力不被优化的程序员
12-12 1597
目录1. 使用vw单位：vw是视窗宽度的百分比，可以根据不同设备的屏幕宽度来进行自适应。在Vue中可以通过设置全局CSS样式，将所有的尺寸单位改为vw。2. 使用Flexible.js：Flexible.js是一个用于淘宝移动端适配的库，可以根据屏幕宽度动态设置html的font-size。在Vue项目中，可以通过在入口文件main.js中引入Flexible.js来实现移动端适配。3. 使用第三方组件库：有一些优秀的移动端UI组件库可以帮助我们快速实现移动端适配，例如Vant、Mint UI等。这些组件库
vue网页适配
生命不息，学习不止
05-11 139
这里使用了混入，在使用时在html中要在最外层div添加ref='body'，第二层div添加class='main'；我这边的标准尺寸是1920:1080；如果不是这个尺寸，请在对应的文件中修改为对应的尺寸。最近做了个网站，关于网页适配不同电脑屏幕踩了几个坑，这里记录一下；我已经对不同的屏幕尺寸做了验证，基本上满足情况。
vue 移动端项目适配
08-19
在Vue移动端项目中进行适配，可以采用以下方法： 1. 使用viewport进行适配：在HTML的head标签中添加以下meta标签，用于设置viewport： ```html ,initial-scale=1.0,user-scalable=no"> ``` 这样可以让页面根据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值