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

最新推荐文章于 2023-11-02 10:50:44 发布
最新推荐文章于 2023-11-02 10:50:44 发布
阅读量1.4k 收藏 3
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Singe_lq/article/details/131668633
版权
这段CSS代码定义了一个媒体查询，当屏幕宽度在768px和1889px之间时，html元素的缩放比例设置为80%，以适应不同设备的显示。同时，对于IE浏览器，使用-ms-viewport属性设置宽度为1889px，确保页面在这些设备上的适配。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    <style>
        /* 默认网页缩放百分之80显示 */
        @media (max-width: 1889px) and (min-width: 768px) {
            html {
                zoom: 80%;
            }

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

大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1336
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
临摹中国慕课静态网页周记
weixin_53363646的博客
03-28 465
临摹中国慕课静态网页周记 第一周 一 、MD语法学习 (1) 标题 # ——一级标题 ## ——二级标题 ### ——三级标题 #### ——四级标题 ##### ——五级标题 ###### ——六级标题 （#与标题之间存在空格） 效果： ——一级标题 ——二级标题 ——三级标题 ——四级标题 ——五级标题 ——六级标题 (2) 字体 ①——加粗 **（加粗语言）** ②——高亮 ==高亮== ③——删除键 ~~（删除语言）~~ ④——斜体 *（斜体语言）* 效果： ①——加粗 （加粗语言） ②——高
前端默认网页缩放80%显示
weixin_44195615的博客
02-28 2766
@media (max-width: 1920px) and (min-width: 768px) { html { zoom: 80%; } @-ms-viewport { width: 1920px; } }
css控制页面缩放80%
爱米酱的博客
06-02 2116
body{ zoom:0.8; }
前端实现大屏缩放自适应屏幕
最新发布
wgq2020的博客
11-02 3929
需要注意的是，在使用上述方法时，需要考虑到元素的排版和布局，不要因为缩放而导致元素重叠或者间距过大。同时，也需要权衡页面的性能和效果，避免使用过多的CSS和JavaScript导致页面加载过慢。使用CSS的@media查询来根据不同的屏幕大小调整元素的样式和布局。使用CSS3的缩放属性（transform: scale()）来缩放页面元素，以适应不同大小的屏幕。页面初始化获取屏幕的原始比例 将自适应元素的scale变量设置为当前比例 监听浏览器窗口大小，获取新的比例值重新给元素scale赋值。
python将图片原比例缩小_Python实现图片长宽比例缩放和填充
weixin_39915700的博客
12-07 1851
1 '''2 : 一个缩略图程序， 不需要的部分可以去掉3 : 主要实现了尺寸(长宽)和大小(KB)的缩小4 '''5 importcv26 importos.path7 from PIL importImage8 from psd_tools importPSDImage91011 classChangeSize:1213 def __init__(self, out_width, ou...
等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放
weixin_36022526的博客
06-03 2461
非响应式web网页，在小于web网页设置的宽度的分辨率电脑下显示，会出现滚动条滚动显示超出分辨率的内容，如：网页主体宽度为设置为width:1400px，那么在1280分辨率电脑的浏览器上访问，就会出现横向滚动条。如果想完整显示，又不做成响应式结构，可以通过等比例缩放的形式让网页完整显示在1280分辨率电脑的浏览器上，等同于浏览器“Ctrl+鼠标滚动”的缩放效果。代码也很简单，通过jquery的r...
响应式web开发
m0_73782968的博客
02-26 794
响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，
响应式前端开发实战：构建下一代Web应用的技术指南
[响应式前端开发实战：构建下一代Web应用的技术指南](https://cdn.educba.com/academy/wp-content/uploads/2019/12/HTML5-Semantic-Elements.jpg) # 摘要 响应式设计作为一种现代网页设计方法，已成为了构建跨设备...
前端三件套知识点小结
weixin_45932704的博客
03-28 1337
前端入门 开发工具：浏览器（Chrom、FireFox、Edge、Safari） 编辑器：VSCode HTML 1.HTML HTML：超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。 HTML5：HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。 HTML5元素定义: 结构性元素：负责web上下文的定义，section、header、footer、nav、article 块级性元素：完成web页面区域的划分，确保内容的有效分割，
浏览器窗口缩小到小于80%比例，scrollTop无法修改
m0_50015961的博客
10-29 734
chrome浏览器窗口缩小到小于80%比例，scrollTop无法修改
解决浏览器缩放导致页面显示不全问题
zhang1339435196的博客
04-16 1万+
问题 pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口，这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。故此，在页面devicePixelRatio（设备像素比例）变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。 解决所用JS /** * @author trsoliu * @date...
前端页面自适应（等比例缩放）
qq_57956183的博客
07-14 3436
以上写法有一个bug，就是如果页面的宽高比例较大时，底部会出现空白，大家可把页面body的颜色调节成和页面颜色相同的颜色，页面看起来会比较舒服。
vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变
热门推荐
weixin_44039043的博客
11-20 2万+
问题描述： vue+elementui项目中，页面实现自适应，缩小放大页面排版基本保持不变 # 解决方案： 第一步：最外层div样式 ： fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 width
大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）
sxww_zyt的博客
04-30 1万+
本篇记录了大屏的三种缩放（按分辨率进行缩放、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)和窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条）的具体实现，记录于此，可供个人学习和参考，如有更好的办法，请斧正~
Vue中页面自适应缩放
......
10-11 2501
在写项目的时候经常会有因为屏幕尺寸不同导致的页面混乱，而px转化为rem可以让页面按照相同的比例进行缩放，使页面效果保持一致。
vue2实现浏览器大小变动页面缩放功能
菜鸡奋斗ing的博客
05-09 5714
在页面html部分获取元素对象（这个一般设置在页面div的第二层）。4.页面具体内容的宽高最好设置。这样按比例的属性会导致在不同分辨率下的排版出现问题（比如1920跟1366）。需要实现根据浏览器大小变化从而页面内容同样缩放思想实现：1.使用css中的。监听方法，监听尺寸变化从而调用缩放相关方法。这样的具体属性，如果设置。获取操作应该也是一样的。
CSS 设置页面缩放
风清扬的专栏
02-01 1万+
请注意，在某些情况下，使用缩放可能不是一种最佳选择。例如，如果希望以响应式方式设计您的页面，则应考虑使用流式布局和媒体查询，而不是缩放。除了缩放外，还可以使用 CSS 布局和媒体查询调整页面样式，以适应不同大小的屏幕。这意味着，当屏幕宽度不超过 480px 时，页面将以 60% 的比例缩放。为特定设备（例如移动设备）设置不同的缩放，可以使用媒体查询。请注意，缩放可能影响页面布局。因此，应谨慎使用该特性。规则调整页面字体大小，改变行高，调整图像尺寸等。
VUE：页面布局的自动缩放
干饭搬砖两不误。
04-07 7698
关于页面自动缩放的两种情况：固定宽高、不固定宽高。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值