html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...

因为网站设计时就不是针对1024分辨率的, 现在如果重做工作量巨大(和重做整个平台差不多了)

现在发现chrome 75% 缩放效果和期望效果几乎一样.

所以有没有什么方法可以实现这效果?

js或css的都可以, 浏览器只考虑chrome

回答：

最后用electron打包了一个客户端搞定了. electron 的 BrowserWindow.webPreferences.zoomFactor 属性和chrome的是一样的

回答：

之前的QQ公众号项目就有使用zoom/scale, 实现图片hover放大的效果.IE7/IE8使用zoom, 其他浏览器使用CSS3 transform scale值实现。

有个值得注意的是，我之前看到网上说，在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。这其实很好理解，对吧。scale呢变化时候，其原本的尺寸是不变的，因此，就没有layout的重计算；但是zoom牵一发动全身，就麻烦地多！

二者之间的差异：

1、zoom的缩放是相对于左上角的；而scale默认是居中缩放

2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化

3、zoom和scale对元素的渲染计算方法可能有差异(有可能会引起图片失真)

4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制

最后需要注意的是，zoom和transform scale不要同时使用，因为缩放效果会叠加

回答：

html {

zoom: .75

}

回答：

html{ transform:scale(.75) }

回答：

把页面拆开，分别缩放。

回答：

media-query + 使用 rem。

回答：

html{

transform:scale(.75)

}

html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...相关推荐

css使两个盒子并列_前端学习CSS
一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二引入方式 (1)行内式:在标记的style属性中设置C ...
html css js注释区别,html、css和js注释的规范用法
成为专业的前端工程师!!! html注释: css注释: //注释内容单行注释(不推荐使用,因为有的浏览器可能不兼容,没有效果) /*注释内容*/ 多行注释(推荐使用) JavaScript: // ...
前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
【前端基础】12.CSS 基础知识学习——基本语法结构
视频目录一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则二,字体样式 1.fon ...
前端学习笔记 - HTML+CSS
基础认知网页什么是网页网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合. 网页是网站中的一"页",通常是 HTML 格式的文件,它要通 ...
萌新接触前端的第二课——CSS
前端知识--CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...
前端小白的html+css入门笔记
?和客户第一次见面要带模版去(5-8个表)? 1.主页面 2.列表页 (图+表/表/图/视频) mata标签规定字符集 !!规定的字符集和编辑软件保存发类型要一致(utf-8/gbk) Utf-8:包 ...
前端基础HTML和css总结
HTML[Hyper Text Markup Language] 超文本标记语言,不是编程语言软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...
个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...

html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...

html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...相关推荐

最新文章

热门文章