Web前端——默认网页按百分之80缩放显示

最新推荐文章于 2023-11-02 10:50:44 发布
最新推荐文章于 2023-11-02 10:50:44 发布
阅读量1.1k 收藏 2
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Singe_lq/article/details/131668633
版权
这段CSS代码定义了一个媒体查询，当屏幕宽度在768px和1889px之间时，html元素的缩放比例设置为80%，以适应不同设备的显示。同时，对于IE浏览器，使用-ms-viewport属性设置宽度为1889px，确保页面在这些设备上的适配。
摘要由CSDN通过智能技术生成 
    <style>
        /* 默认网页缩放百分之80显示 */
        @media (max-width: 1889px) and (min-width: 768px) {
            html {
                zoom: 80%;
            }

            @-ms-viewport {
                width: 1889px;
            }
        }
    </style>

《独自往前》
关注
css控制页面缩放80%
爱米酱的博客
06-02 1967
body{ zoom:0.8; }
web网页按比例显示图片实现原理及js代码
10-27
由于上传图片的大小是未知的，在显示成缩略图的时候必须进行按比例的缩放才能美观地显示，本文将为大家简单的介绍一种比较不错的方法，有此需求的朋友可以参考下
解决浏览器缩放导致页面显示不全问题
zhang1339435196的博客
04-16 1万+
问题 pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口，这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。故此，在页面devicePixelRatio（设备像素比例）变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。 解决所用JS /** * @author trsoliu * @date...
控制浏览器百分比缩放
weixin_45852743的博客
08-21 1039
以80%定义浏览器默认白百分百的比例缩放。
前端默认网页缩放80%显示
weixin_44195615的博客
02-28 2564
@media (max-width: 1920px) and (min-width: 768px) { html { zoom: 80%; } @-ms-viewport { width: 1920px; } }
python将图片原比例缩小_Python实现图片长宽比例缩放和填充
weixin_39915700的博客
12-07 1815
1 '''2 : 一个缩略图程序， 不需要的部分可以去掉3 : 主要实现了尺寸(长宽)和大小(KB)的缩小4 '''5 importcv26 importos.path7 from PIL importImage8 from psd_tools importPSDImage91011 classChangeSize:1213 def __init__(self, out_width, ou...
前端实现大屏缩放自适应屏幕
wgq2020的博客
11-02 3294
需要注意的是，在使用上述方法时，需要考虑到元素的排版和布局，不要因为缩放而导致元素重叠或者间距过大。同时，也需要权衡页面的性能和效果，避免使用过多的CSS和JavaScript导致页面加载过慢。使用CSS的@media查询来根据不同的屏幕大小调整元素的样式和布局。使用CSS3的缩放属性（transform: scale()）来缩放页面元素，以适应不同大小的屏幕。页面初始化获取屏幕的原始比例 将自适应元素的scale变量设置为当前比例 监听浏览器窗口大小，获取新的比例值重新给元素scale赋值。
浏览器窗口缩小到小于80%比例，scrollTop无法修改
m0_50015961的博客
10-29 676
chrome浏览器窗口缩小到小于80%比例，scrollTop无法修改
vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变
热门推荐
weixin_44039043的博客
11-20 2万+
问题描述： vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变 # 解决方案： 第一步：最外层div样式 ： fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 width
Vue中页面自适应缩放
......
10-11 2325
在写项目的时候经常会有因为屏幕尺寸不同导致的页面混乱，而px转化为rem可以让页面按照相同的比例进行缩放，使页面效果保持一致。
2023高薪前端面试题（一、前端基础——css）
iaz999的博客
04-28 1496
Flex如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。js动画与css3动画的区别_js逐帧动画_Sco_Jing1031的博客-CSDN博客。
响应式web开发
m0_73782968的博客
02-26 747
响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，
前端三件套知识点小结
weixin_45932704的博客
03-28 1270
前端入门 开发工具：浏览器（Chrom、FireFox、Edge、Safari） 编辑器：VSCode HTML 1.HTML HTML：超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。 HTML5：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。 HTML5元素定义: 结构性元素：负责web上下文的定义，section、header、footer、nav、article 块级性元素：完成web页面区域的划分，确保内容的有效分割，
前端面试题汇总
weixin_42023243的博客
11-10 4787
前端面试题
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1227
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
Unity：WEB端发布后运行时窗口自适应浏览器窗口大小（网页内全屏）
如果i
05-03 4229
Unity： WEB端自适应浏览器窗口大小
vue2实现浏览器大小变动页面缩放功能
菜鸡奋斗ing的博客
05-09 5381
在页面html部分获取元素对象（这个一般设置在页面div的第二层）。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题（比如1920跟1366）。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现：1.使用css中的。监听方法，监听尺寸变化从而调用缩放相关方法。这样的具体属性，如果设置。获取操作应该也是一样的。
CSS 设置页面缩放
忧郁的蛋的专栏
02-01 1万+
请注意，在某些情况下，使用缩放可能不是一种最佳选择。例如，如果希望以响应式方式设计您的页面，则应考虑使用流式布局和媒体查询，而不是缩放。除了缩放外，还可以使用 CSS 布局和媒体查询调整页面样式，以适应不同大小的屏幕。这意味着，当屏幕宽度不超过 480px 时，页面将以 60% 的比例缩放。为特定设备（例如移动设备）设置不同的缩放，可以使用媒体查询。请注意，缩放可能影响页面布局。因此，应谨慎使用该特性。规则调整页面字体大小，改变行高，调整图像尺寸等。
VUE：页面布局的自动缩放
干饭搬砖两不误。
04-07 7607
关于页面自动缩放的两种情况：固定宽高、不固定宽高。
页面固定缩放，浏览器固定缩放比例
最新发布
09-12
页面固定缩放是指网页设计时就确定了网页的显示尺寸，无论用户使用什么设备查看，网页都会保持一个固定的比例显示，不会随着浏览器的缩放功能而改变。这通常是通过CSS来控制的，比如使用视口元标签（viewport meta tag）或者CSS的transform属性来实现。 浏览器的固定缩放比例则是指用户在浏览器中手动设置的缩放级别，这个级别会应用到所有的网页上，使得用户在浏览不同网站时，页面都会按照这个缩放比例显示，以便适应用户的阅读喜好或视力需求。 实现页面固定缩放的方法如下： 1. 在HTML的<head>部分使用视口元标签来设置缩放比例： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 这里的`initial-scale=1.0`表示页面初始缩放比例为100%，固定不变。 2. 使用CSS的transform属性进行缩放： ```css body { transform: scale(0.8); transform-origin: top left; } ``` 这里的`transform: scale(0.8);`表示将页面整体缩小到原来的80%，而`transform-origin`设置变换的原点。 3. 通过JavaScript动态控制： ```javascript const bodyStyle = document.body.style; bodyStyle.transform = 'scale(0.8)'; bodyStyle.transformOrigin = 'top left'; ``` 这段代码同样可以实现页面的整体缩放，效果与CSS的transform属性相同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值