1 首先看一下 viewport 布局是怎么回事?
通过手动创建一个 mata 标签, 然后设置 initial-scale 来控制 viewport 的缩放下面有一个例子: 假设公司的 ui 给我一张宽度是 750px 的设计稿, 我通过 viewport 做一个适配:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <!-- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=0.5,user-scalable=no"/> -->
- <title>Document</title>
- </head>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- html,body{
- font-size: 100px;
- }
- #header{
- width: 7.50rem;
- height: 80px;
- background:blue;
- color:#fff;
- font-size:24px;
- line-height:80px;
- height: 80px;
- text-align:center;
- }
- #main{
- overflow: hidden;
- text-align:center;
- color: #fff;
- }
- #main .left{
- float: left;
- width: 3.75rem;
- height: 1000px;
- line-height: 1000px;
- background: green;
- }
- #main .right{
- float: left;
- width: 3.75rem;
- height: 1300px;
- line-height: 1300px;
- background: yellow;
- }
- #footer{
- width: 7.50rem;
- height: 50px;
- background: #000;
- line-height: 50px;
- color: #fff;
- font-size: 24px;
- }
- </style>
- <body>
- <div id="app">
- <div id="header">
- header
- </div>
- <div id="main">
- <div class="left">
- left
- </div>
- <div class="right">
- right
- </div>
- </div>
- <div id="footer">
- footer
- </div>
- </div>
- <!-- 这里需要注意的几点是:
- 1 在头部先不要写 meta 标签
- 2createElement 一个 meta 标签, 然后再在这个标签上面添加一些属性
- 3 这里最重要的是设置 initial-scale 的值, 然后将 meta 标签插入到文档中 -->
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <script>
- /* 我们假设给出的设计图纸是 750px, 而我们布局的时候是按照 750px 的图纸来做的当切换不同手机宽度分辨率的手机的时候此时需要有一个缩放比例 */
- $(function(){
- var targetWidth = 750
- // 不能用 clientWidth, 因为此时还没有使用 meta 标签限制宽度, 拿到的宽度是 980px.
- // var clientWidth = document.documentElement.clientWidth
- // 此时使用 screen.width 去获取屏幕的宽度, 拿到当前宽度值才是屏幕真实的宽度
- var width =screen.width;
- // 而这个缩放的比例是当前的屏幕相对于 750 来说的值, 比如说当前的是 375 所以是扩大 0.5 倍
- var scale = width / targetWidth
- var metaNode = document.createElement('meta')
- metaNode.setAttribute('name','viewport')
- metaNode.setAttribute('content','width=device-width,initial-scale='+scale)
- document.body.appendChild(metaNode)
- })
- </script>
- </body>
- </html>
2 然后看第二个 rem 布局:
他的中心思想就是把当前的设计稿平分为等份 (比如淘宝的 10 份, 我中意的 16 份), 下面的例子是分成 16 份然后设置根目录的 fontSize 为手机理想视口宽度的 1/16, 那么对应的宽度就用这个根目录去做数学算法原理同样是 createElement 一个 style 标签, 然后给他设置值 html{font-size:width/16px !important;}.
不多说, 上代码:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=0.5,user-scalable=no"/>
- <title>Document</title>
- </head>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- #header{
- width: 16rem;
- height: 80px;
- background:blue;
- color:#fff;
- font-size:24px;
- line-height:80px;
- height: 80px;
- text-align:center;
- }
- #main{
- overflow: hidden;
- text-align:center;
- color: #fff;
- }
- #main .left{
- float: left;
- width: 6rem;
- height: 1000px;
- line-height: 1000px;
- background: green;
- }
- #main .right{
- float: left;
- width: 10rem;
- height: 1300px;
- line-height: 1300px;
- background: yellow;
- }
- #footer{
- width: 16rem;
- height: 50px;
- background: #000;
- line-height: 50px;
- color: #fff;
- font-size: 24px;
- }
- </style>
- <body>
- <div id="app">
- <div id="header">
- header
- </div>
- <div id="main">
- <div class="left">
- left
- </div>
- <div class="right">
- right
- </div>
- </div>
- <div id="footer">
- footer
- </div>
- </div>
- <!-- 疑问:
- 1 把一个网页宽度分成 16 等份, 然后按照设计稿的比例来算每一份占据多少比例.
- 2 创建一个 style 标签, 并且设置根目录的 fontSize 相对于宽度的 1/16 得到的值, 然后插入到文档中 -->
- <script>
- var clientWidth = document.documentElement.clientWidth;
- var styleNode = document.createElement('style');
- styleNode.innerHTML = 'html{font-size:'+ clientWidth / 16 + 'px !important;}';
- document.body.appendChild(styleNode);
- </script>
- </body>
- </html>
3 那我们程序员可是很懒的, 总想做一些简单的工作额, 那么有没有人把这两种布局的优势捆绑在一起了呢? 这个啊, 还真有淘宝就是这样做的, 然后我在 github 上面找到了一个小型的仿淘宝布局的库, 拿出来练练, 因为这些 viewport 的 js 逻辑或者是设置根目录的字体大小逻辑它全部帮你搞定了不多说看代码:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <!-- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=0.5,user-scalable=no"/> -->
- <title>Document</title>
- </head>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- #header{
- width: 10rem;
- background:blue;
- color:#fff;
- line-height:80px;
- height: 80px;
- text-align:center;
- }
- #main{
- overflow: hidden;
- text-align:center;
- color: #fff;
- }
- #main .left{
- float: left;
- width: 6rem;
- height: 1000px;
- line-height: 1000px;
- background: green;
- }
- #main .right{
- float: left;
- width: 4rem;
- height: 1300px;
- line-height: 1300px;
- background: yellow;
- }
- #footer{
- width: 10rem;
- height: 50px;
- background: #000;
- line-height: 50px;
- color: #fff;
- }
- /* 生效 */
- [data-dpr="2"] div {
- font-size: 24px;
- }
- [data-dpr="3"] div {
- font-size: 36px;
- }
- </style>
- <body>
- <div id="app">
- <div id="header">
- header
- </div>
- <div id="main">
- <div class="left">
- left
- </div>
- <div class="right">
- right
- </div>
- </div>
- <div id="footer">
- footer
- </div>
- </div>
- <!--
这里需要注意两个东西:
1 如果使用并且引用了 flexible.js 之后, 就不要手动的去设置 meta 标签上的 viewport 了, viewport 的设置交给 flexible.js 去做, 他会做的比你更出色的
2 这里他会去设置 data-dpr,initial-scale 值和根目录 html 的 font-size(一般是宽度的 1/10)
3 剩下的事情就按照设计图标准来做了比如说 ui 给你的设计稿是 750px 的, 那么根目录就是 75px, 然后所有的宽高都按照根目录的 fontsize 来进行设置
4 字体大小和图片 (受 data-dpr 的影响), 所以普通的字体大小不应该是 rem 作为单位, 而是应该下面这样写例如:
- [data-dpr="2"] p {
- font-size: 16px;
- }
- [data-dpr="3"] p {
- font-size: 24px;
- }
- .btn-android {
- background-image: url("../img/@2x/android.png?v=@@version");
- [data-dpr="3"] & {
- background-image: url("../img/@3x/android.png?v=@@version");
- }
- }
最后做一个总结: 就是在程序员的世界里, 只要能想得到的又有人或者将要有人给做了或者准备做了, 有一双发现美的眼睛, 把这些整合起来, 这会让造轮子的人很开心
来源: http://www.qdfuns.com/article/28128/c81c76f86451ccb8a6d1c16bca024b06.html