同一个页面,在不同显示比例下如何等等比缩放而使页面不会变形
比如同一个页面下,372px 和642px显示比例下文字大小和块元素高度会随着显示的比例来等比缩放
比例始终显示协调,不用重复调试,其中一个重要的元素是将所有定义宽高的元素设置为rem
rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}(也就是14px)。 然后其他的字体就是将你要的值除以14得到的值; 比如iphone5主题大小是320px;换算成rem就是320/14=22.85714rem; padding的24px也就是24/14=1.714285714285714rem,以此类推。 上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了,对照表如右图: 用这个rem单位的好处有啥我不知道,不过如果你根元素的字体大小选62.5%,那px和rem之间的换算就是px直接除以10就得到rem了,这比em简单多了,到现在我都没搞清楚em和px之间是如何换算的。 另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持,如果你要考虑ie8及一下,可以设置个px再设置个rem就可以了。
如上图,当然只有rem元素还是不够的,以下是整个过程的实现。
代码如下
<div class="header"> css中单位px和em,rem的区别!<br> 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 </div>
一、在head里面加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。二、CSS中添加代码html{font-size: 625%;} body {font-family: "Microsoft YaHei";color: #333;width: 100%;max-width: 640px;min-width: 320px;margin:0 auto;} .header{ height: 1rem; background: #ccc; font-size: 0.2rem; text-align: center; padding-top: 0.1rem }
移动端设置页面最大宽度640px 最小宽度320pxfont-size:625% 是相对于设备默认的字体大小,那么接下来就要定义设备的默认字体大小 font-size,三、header 中加入JAVASCRIPT 代码以上代码根据设备宽度自动匹配字体大小,从而实现等比缩放的效果。<script src="http://www.meiya.org.cn/style/js/jquery-1.9.1.min.js"></script> <script> $(function () { function resi() { var html = document.querySelector("html"); var wW = document.body.clientWidth || document.documentElement.clientWidth; var maxW = 640; var minW = 320; if (wW > maxW) wW = maxW; var ratio = wW / minW; html.style.fontSize = 50 * ratio + "px" } window.addEventListener("DOMContentLoaded", function() { var bodys = document.querySelector("body").style; bodys.opacity = "1"; bodys.filter = "alpha(opacity=100)"; resi() }); window.addEventListener("resize", resi); }); </script>