pc端页面等比缩放到移动端

最新推荐文章于 2023-10-14 14:37:07 发布
最新推荐文章于 2023-10-14 14:37:07 发布
阅读量2.3k 收藏 15
点赞数 4
文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42669897/article/details/114266250
版权

PC端的管理系统要求等比缩放到手机端。

PC端页面显示：

 

手机端显示：

项目是用vue-cli3.0构建的，直接在public 文件夹 index.html 的head 加入  ：

<meta name="viewport" content="user-scalable=yes">

完成~
~婷宝~
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PC、移动端自适应等比缩放布局方案
11-16
PC、移动端自适应等比缩放布局方案
怎么样能保证vue项目pc端整体缩放到移动端布局不变
元宝的博客
02-28 1120
vue项目pc端手机端自适应布局不变
移动端适配知识（react--张天禹）
qq_44917015的博客
12-05 1259
移动端开发 一、相关概念 （一）屏幕相关 1. 屏幕大小 指屏幕对角线长度，单位是英寸（inch）。常见尺寸有：3.5寸、4.0寸、5.0寸、5.5寸、6.0寸等等。 备注：1英寸（inch）= 2.54 厘米（cm） 2. 屏幕分辨率 是指屏幕在：横向、纵向上的物理像素点总数，一般用 n * m 表示。 例如：iPhone6 的屏幕分辨率为： 750 * 1334 注意： 屏幕分辨率是一个固定值，无法修改！！ 屏幕分辨率、显示分辨率是两个概念，系统设置中可以修改的是：显示分辨率。 屏幕分辨率 >
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
weixin_44051048的博客
11-23 1756
文章目录（1）Flex弹性盒子布局一： 父容器上的属性1、 display:flex 设置为弹性盒子（写在父容器上）2、flex-direction值 设置子项的布局方向（写在父容器上）3、Flex-wrap:值 设置子项单行还是换行显示（写在父容器上）4、Flex-flow: 值1 值2 （写在父容器上）5、justify-content:值 主轴方向上子项的对齐及分布方式 （写在父容器上）6、align-items:值 子项们相对flex容器在侧轴上的对齐方式（写在
只做PC，手机端页面等比例缩放
zxp_smile的博客
09-09 762
不用把pc端都设计成百分比，只要不引入px和rem转换的js，pc端转手机端就会等比例缩放
js实现pc网页等比缩放到移动端（h5）展示
weixin_41674235的博客
07-01 3720
pc网页在手机端预览时，会存在样式混款，横向滚动，此时我们想让pc的网页等比缩小到移动端展示网页，直接加以下js就好啦：
让PC端页面在手机端显示缩小版的解决方法
weixin_46020146的博客
06-14 1141
让PC端页面在手机端显示缩小版的解决方法
vue解决PC端等比缩放适配手机端
zhaokai621的博客
07-05 2135
vue等比缩放PC端适配手机端
vue页面同时适配手机端和PC端
MW
08-19 3616
vue页面同时适配手机端和PC端
vue项目实现pc端和手机端屏幕自适应
weixin_72459765的博客
10-28 6102
vue项目实现pc端和手机端屏幕自适应
c#图片缩放图片剪切功能实现(等比缩放)
09-04
c#图片缩放剪切功能实现，代码中包含了c#图片处理的一些基础知识,与大家分享
PHP实现图片的等比缩放和Logo水印功能示例
10-19
主要介绍了PHP实现图片的等比缩放和Logo水印功能,结合实例形式分析了php图片等比例缩放及logo水印添加操作技巧,需要的朋友可以参考下
基于jquery实现等比缩放图片
10-25
主要给大家分享了一段基于jquery实现等比缩放图片的代码，非常的实用，这里推荐给大家
PHP中图片等比缩放的实例
10-27
PHP中图片等比缩放的实例，需要的朋友可以参考一下
移动端WEB开发
a_xia_o的博客
02-12 1118
由于 Retina 的出现，对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽(乔布斯提出的哟)
PC端适配到移动端记录
qq_36205941的博客
09-14 424
一、前言 最近遇到了将PC端的编辑器（在线设计编辑器）兼容到pad端，为什么不是手机端呢，因为我们手机端已经有一套专门的编辑器，但是在pad上无法直接用移动端的编辑器。之前做过的兼容基本上都是视觉上的适配，但是在编辑器中，需要各种手势的兼容，所以下面从两个方面进行分析 这里推荐一下我们的稿定编辑器哈，功能很全，性能也还ok。 稿定设计 二、适配过程 2.1 收集当前编辑器在pad端存在的问题 选中元素后后无法通过手势移动。 文本元素调起键盘特别困难，canva的交互为当元素处于选中状态并为文本元素
pc端html页面到移动端等比缩放
weixin_30340775的博客
05-07 3504
head标签里面加这个<meta name="viewport" content="user-scalable=yes"> 转载于:https://www.cnblogs.com/wang-z-z/p/9003486.html
pc端页面在移动端等比例缩放
joan_yb的博客
06-01 838
pc端页面在移动端等比例缩放
pc网页等比缩放至手机端
最新发布
FengZi_00的博客
10-14 228
【代码】pc网页等比缩放至手机端。
jsp引入多个页面等比缩放
06-09
在JSP中引入多个页面并等比缩放可以使用CSS中的transform属性和flex布局。 首先，使用flex布局将被引入的页面进行排列，示例代码如下： ```jsp <div class="container"> <div class="box"> <jsp:include page="header.html" /> </div> <div class="box"> <jsp:include page="content.html" /> </div> <div class="box"> <jsp:include page="footer.html" /> </div> </div> ``` 其中，container为flex容器，box为flex项目。 接下来，使用CSS中的transform属性将被引入的页面进行等比缩放，示例代码如下： ```css .container { display: flex; justify-content: space-between; } .box { flex: 1; height: 100%; overflow: hidden; } .box jsp\\:include { position: relative; width: 100%; height: 100%; transform-origin: top left; transform: scale(1); transition: transform .3s ease-in-out; } .box:hover jsp\\:include { transform: scale(1.1); } ``` 其中，transform: scale(1)表示页面不进行缩放，transform: scale(1.1)表示页面进行等比缩放，overflow: hidden可以使页面超出容器的部分被隐藏。另外，注意使用jsp\\:include而非jsp:include，以避免JSP标签被解析。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值