vue实现项目对不同设备展示的缩放

最新推荐文章于 2023-08-13 20:38:35 发布
最新推荐文章于 2023-08-13 20:38:35 发布
阅读量657 收藏 5
点赞数 1
分类专栏： vue.js入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyphf/article/details/116785507
版权

我们看到我们当前的网站在iphone6/7/8上基本上没什么问题

但是在ipad上展示效果就不尽如人意了

我们希望我们的网站能够针对不同的设备类型能够展示不同的展示效果的一个网站

我们的整个项目都通过rem来进行页面布局

base.scss

html {
    font-size: 100px; // rem的大小是相对于这个根姿态的fontSize的
}
body {
    font-size: .12rem;
}

我们要检查一下项目里面有没有笔误的地方使用了px，把它改成rem

我们现在开发的尺寸都是根据iphone678，也就是375这个尺寸来开发的，如果你屏幕变宽的话，我这个屏幕就等比例放大

如果屏幕榨，那么我就等比例缩小

我们可以在index.html里面写一段js代码，这里是不参与编译的，所以我们要用原生ES5的语法来写

<!DOCTYPE html>
<html lang="">
  <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">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
      // 这里表示我一进入页面，我就知道设备现在的屏幕宽度是多少
      var width = document.documentElement.clientWidth || document.body.clientWidth;
      // 我们再计算一下当前的设备和我们网页开发的默认的设备之间的比例
      var ratio = width / 375;
      // 我们要等比例缩放，我们整个网站都是使用rem布局的，那么我们只要使用改变fontSize的大小就行了    
      // 计算新的设备字体大小
      var fontSize = 100 * ratio;
      // 把这个数值赋值给html的fontsize
      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px'
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这个时候我们再看一下iPad上的展示效果

这样我的网站就可以适配不同的设备了

 

xyphf_和派孔明
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue实现展开收缩内容
macangyewangs的博客
04-09 625
<template> <div class="contentweb"> <div class="type"> <span class="type_a">类型:</span> <div class="type_b"> <span class="type_bs" v-for="(item, index) in testList"
vue 屏幕自适应及全屏放大缩小
weixin_49261425的博客
07-19 3759
1. <div id="screen-content" > <div id="main"> <!--这里放内容--> </div> </div> 2.data中 data(){ return{ screenWidth: document.documentElement.clientWidth,//屏幕宽度 screenHeight: document.documentElement.
vue2根据不同的电脑分辨率显示页面内容及不同设备适配显示
weixin_40444253的博客
08-13 839
vue2根据不同的电脑分辨率显示页面内容及不同设备适配显示
vue组件系列-预览、放大、缩小、旋转
weixin_33724659的博客
05-27 2944
2019独角兽企业重金招聘Python工程师标准>>> ...
vue H5端判断安卓跟ios显示不同的背景图
leng0920的博客
03-16 430
html: <div :class="`${isApple==true ? 'index-cont-phone' : 'index-cont'}`" ></div> css: .index-cont{ width: 100%; height: auto; min-height: 100vh; overflow-x:hidden; background: url("https://t.
H5 PhotoSwipe简单例子 vue图片拉伸放大缩放例子
11-27
**标题解析：** "H5 PhotoSwipe简单例子 - vue图片拉伸放大缩放例子" 这个标题表明我们要探讨的是一个使用H5技术，并结合PhotoSwipe库实现的Vue.js项目，该项目主要用于处理图片的放大、缩小和拉伸功能。 **描述...
Vue实现可移动水平时间轴
10-15
如果应用需要在不同设备上运行，可以使用Vue的`v-bind`和媒体查询来实现响应式设计，使时间轴在不同屏幕尺寸下都能良好显示。 8. **数据绑定**： 使用Vue的v-model绑定数据，确保当用户在编辑里程碑弹出框中做出...
vue项目在webpack2实现移动端字体自适配功能
11-20
在开发移动端Vue项目时，确保页面在不同设备上具有良好的适配性和可读性是非常重要的。这通常涉及到将设计稿中的像素单位（px）转换为相对单位（rem），以适应不同分辨率和尺寸的屏幕。本篇文章将详细介绍如何利用...
线上3D汽车换肤和演示实现不同风格展示系统
最新发布
10-27
【描述】：“通过three.js，vue实现3D汽车换肤实现不同颜色转换，同时通过材质变换实现汽车的展示” three.js是JavaScript的一个强大3D库，它提供了丰富的功能，如几何形状创建、光照处理、纹理贴图等，用于在Web...
基于vue-cli vue-router搭建底部导航栏移动前端项目
08-27
总结来说，这个项目展示了如何利用Vue CLI和Vue Router搭建一个移动端的底部导航栏应用，同时结合Flex布局和viewport设置，确保了在不同设备上的良好显示。开发者可以通过理解这些核心概念和技术，进一步掌握Vue.js...
实现全屏操作
lizhi1030的博客
05-08 553
data() { return { isShowFullScreen: true, // 全屏or退出全屏标志 doc: document.documentElement } }, keyUp(element) { this.isShowFullScreen = !this.isShowFullScreen if (element.req...
vue适配不同屏幕大小_轻阅读移动端适配必须掌握的基本概念和适配方案
weixin_39604897的博客
12-05 270
原文：https://www.cnblogs.com/jofun/archive/2020/07/21/13358140.html前言随着技术的发展，移动设备越来越流行，并且不同设备间屏幕尺寸和屏幕像素的差异，移动端开发面临着多分辨率适配的问题。基本概念响应式开发本质时针对多种屏幕做适配，在实际开发中，通常情况下时针对主流的设备进行适配。在开发前，必须掌握几个基本概念：物理像素：即屏幕的...
3.1、public公共样式
weixin_44195250的博客
09-27 328
public>index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi...
【文字自适应大小】vue文字字体大小自适应，根据屏幕大小变化字体自适应大小，简单方法
热门推荐
seeeeeeeeeee的博客
03-16 1万+
前端常遇到的一个情况是要做自适应的页面，但是有时候文字定了font-size后屏幕大小变化但是文字不跟着变。但是设置rem之类的也麻烦，这里就给一个简单的方法实现。 写法：利用css的自动计算方法calc font-size:calc(100vw * 100 / 1920); 解释一下： calc：是一个css自带的计算方法，可以自动计算后返回px单位的值 100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。 *100：这里乘的100代表100px。 1920：设计稿的宽度 比如：我的需求是屏幕上要一个
vue解决PC端等比缩放适配手机端
zhaokai621的博客
07-05 2272
vue等比缩放PC端适配手机端
怎么样能保证vue项目pc端整体缩放到移动端布局不变
元宝的博客
02-28 1290
vue项目pc端手机端自适应布局不变
html移动端插入mov_vue项目移动端、pc端适配方案
weixin_39707597的博客
10-27 370
vue项目移动端、PC端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S npm i postcss-px2rem -S 简要介绍这两个包的用途：f...
vue、ECharts、flexible.js在移动端的自适应安卓、苹果等机型的分辨率
克隆代码
03-23 1869
因我们在移动端中大多数是使用rem、 vw、vh，而 echarts 里面的尺寸只能写 16或16%，有的如：fontSize 之类的只有16 。导致写的时候按分辨率750×1334px ，在分辨率480×800px的机型上就差异跟大，字体大小、宽高、left、top、right、bottom等在设置的值是16或16%时，会有很大偏差，这就需要我们自己去计算处理了。 解决思路：将实际窗口的大小与设计图窗口大小做比得到要给相对的比率，每个单位数值和这个比率相乘即可。即：按比例缩放字体。比如设计图是750x1
安卓+ios系统--手机端页面自适应手机屏幕大小，禁止手动放大和缩小VUE
Stephanie翟倩
01-18 907
自适应屏幕大小。
vue项目做可视化大屏自适应缩放
05-17
Vue项目做可视化大屏自适应缩放可以尝试以下几个方案： 1. 使用CSS3的transform属性进行缩放 在Vue组件中设置一个容器元素，通过CSS3的transform属性对容器元素进行缩放，可以实现自适应缩放的效果。在容器元素的父元素中监听resize事件，根据父元素的宽度和高度来计算缩放比例，然后通过CSS3的transform属性对容器元素进行缩放。 示例代码： ```html <template> <div class="container" ref="container"> <!-- 可视化大屏内容 --> </div> </template> <script> export default { mounted() { window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { const container = this.$refs.container const parentWidth = container.parentNode.clientWidth const parentHeight = container.parentNode.clientHeight const contentWidth = container.offsetWidth const contentHeight = container.offsetHeight const scaleX = parentWidth / contentWidth const scaleY = parentHeight / contentHeight container.style.transform = `scale(${Math.min(scaleX, scaleY)})` } } } </script> <style> .container { transform-origin: top left; } </style> ``` 2. 使用Vue的自定义指令进行缩放 在Vue项目中可以创建一个自定义指令，通过该指令来实现自适应缩放的效果。在指令中监听resize事件，根据父元素的宽度和高度来计算缩放比例，然后通过CSS3的transform属性对元素进行缩放。 示例代码： ```html <template> <div class="container" v-resize-scale> <!-- 可视化大屏内容 --> </div> </template> <script> export default { directives: { resizeScale: { inserted(el) { function handleResize() { const parentWidth = el.parentNode.clientWidth const parentHeight = el.parentNode.clientHeight const contentWidth = el.offsetWidth const contentHeight = el.offsetHeight const scaleX = parentWidth / contentWidth const scaleY = parentHeight / contentHeight el.style.transform = `scale(${Math.min(scaleX, scaleY)})` } window.addEventListener('resize', handleResize) handleResize() }, unbind() { window.removeEventListener('resize', this.handleResize) } } } } </script> <style> .container { transform-origin: top left; } </style> ``` 以上两种方案可以根据实际需求进行选择，第一种方案比较简单，但是需要在组件中手动监听resize事件，第二种方案可以通过Vue的自定义指令来实现缩放效果，使得组件代码更加简洁。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值