在HTML5中实现页面缩放的四种实用技巧
最编程
2024-02-17 17:21:11
...
1.viewport
这种方法，不是所有的浏览器都兼容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />
2.百分比
这种方法，可以兼容大部分浏览器，但是修改幅度比较大
.main .login .txt1{margin-top:8.59375%; position:relative;}
3.css transform
这种方法，可以兼容大部分浏览器，但是页面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}
4.使用响应式布局，但是这样的话得做两个两套界面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
这种方法，不是所有的浏览器都兼容
<meta name="viewport" content="width=640,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no, initial-scale=1.0" />
2.百分比
这种方法，可以兼容大部分浏览器，但是修改幅度比较大
.main .login .txt1{margin-top:8.59375%; position:relative;}
3.css transform
这种方法，可以兼容大部分浏览器，但是页面的位置是居中的
.w320
{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
}
4.使用响应式布局，但是这样的话得做两个两套界面
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
建议使用第2，4种
http://blog.chinaunix.net/uid-11121450-id-3957237.html
推荐阅读
-
在基于虚拟页面的存储管理中实现页面替换算法 java 虚拟页面存储的三种算法
-
如何在H5页面中利用HTML5的qrcode功能实现实体二维码的扫描与识别
-
几种在 JavaScript 中实现页面跳转的方法
-
在HTML5中实现页面缩放的四种实用技巧
-
在React和Vue中，我们是如何玩转router的？ - 使用HTML5 History API，React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作： 1. 当URL发生变化时，React Router悄悄地“监听”浏览器地址栏的改动，主要通过popstate事件来察觉url更改。 2. 随着URL的变化，Router会对照预先设定好的JavaScript路由配置对象，依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线，React Router就会如魔法般地渲染相应的组件到网页上，从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
如何迅速在JavaScript中实现简繁体中文间的切换：实用技巧与网站支持简繁体转换的秘密武器
-
在 Vue 开发中，如何利用 postcss-pxtorem 功能自动将 px 转换为 rem，实现页面布局的响应式适配？
-
在Excel中实现跨工作表引用的五种实用技巧
-
在 Vue 中嵌入本地 HTML 页面并实现实时通信的 iframe 技巧
-
四种在TensorFlow中实现的交叉熵算法及其应用解析