网页中如何做到缩放后屏幕后内容不受变化

2025-02-24 16:23:57

推荐回答（5个）

回答1：

可以通过响应式布局来实现内容随着屏幕比例变化而变化,下面列出三个简单的响应式方法:

例如使用flex布局;

flex布局的使用

或者把元素的大小改为百分比单位;

百分比单位的使用

又或者使用vh单位和vw单位,他们是基于显示屏的长宽比来计算内容的大小:

whvh的使用

回答2：

是通过给body设置固定定位实现的，以及去除元素的内外边距

复制以下代码，你可以预览一下（亲测无误）

Document

如图

回答3：

通过观察它的代码，得出，核心内容是用的 webgl, 然后内容绘制在canvas上面，之所以ctrl+滑轮缩放，是因为窗口大小并没有改变。分析是因为它是根据窗口大小做的适配。并不是其它人提到的媒体查询适配。可以尝试缩小窗口，你会发现会出现适配。

回答4：

网站要做适配处理，
1.安装需要响应的包
npm i lib-flexible -S
2.安装第二个包
npm i px2rem-loader -D
3.安装好了之后全局引入包，在main.js中添加如下代码
import 'lib-flexible'
4.在vue.config.js中添加如下代码
css: {loaderOptions: {postcss: {plugins: [require('postcss-px2rem')({remUnit: 192})]}},},5.修改lib-flexible.js，
为什么要改，你会发现一个问题，移动端没问题，但是pc端他的大小只适配到540，
所以在安装包里找到 lib-flexible，包中的lib-flexible.js文件，
接下来把这个文件复制出来，放到lib文件下
然后在main.js中
把import 'lib-flexible'改成import './lib/lib-flexible/flexible',
知识在线，共同探讨，一起搬砖，快乐生活，苦了头发。
喜欢我就关注我吧！喜欢我就关注我吧！喜欢我就关注我

回答5：

你可以f12一下就知道了，他们的图片是根据不同的分辨率使用不同的图片。另外css样式，它用的是rem，这个会根据屏幕不同，相应的改变大小。