移动端自适应布局方案尝试_第1页
移动端自适应布局方案尝试_第2页
移动端自适应布局方案尝试_第3页
移动端自适应布局方案尝试_第4页
移动端自适应布局方案尝试_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、移动端自适应布局方案尝试原文地址：移动端自适应布局方案尝试问题刚开始接触移动端H5页面的时候最困扰的几个问题是：6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！图片，div等如何等比自适应设计图后来慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成，第二点知道了单位rem。 目的不想因为使用rem而一一去计算设计稿的尺寸，设计稿750的尺寸的标注可以直接在sass中使用；字体不使用rem缩放，原因是：显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到

2、更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。还一个目的是，在页面没有设置viewport的时候动态设置，并且不让页面有一个“闪现”的过程（也就是刚加载没设置的状态到设置的状态）；页面动态变化时，尺寸相应变化； 尝试在写H5页面的时候，尽可能少的去写meta标签，我会这样做：<head> <title>viewport test</title> <meta charset="utf-8"> <link rel="style

3、sheet" href="style/style.css"></head>就这样简单，然后实现的代码当然是放在head里。因为并没有写viewport，所以得判断加上复制代码if (!metaEl) metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'width=device-width,initial-scal

4、e=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'); if (docEl.firstElementChild) docEl.firstElementChild.appendChild(metaEl); else var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); 复制代码然后根据页面的devicePixelRatio缩放var scale = parseFloat(1

5、/ dpr).toFixed(2);if (dpr != 1) metaEl.setAttribute('content', 'width=device-width,initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no');设置根字体大小复制代码/ document widthfunction setDocumentFontSize () var width = docEl.

6、getBoundingClientRect().width; docEl.style.fontSize = width / 10 + 'px'setDocumentFontSize();复制代码页面resize监听复制代码var timer;win.addEventListener('resize', function() clearTimeout(timer); timer = setTimeout(function () setDocumentFontSize(); , 300);, false);复制代码为了字体不使用rem，需要为documentElem

7、ent设置data-dpr属性复制代码/ document data-dpr set font-size pxvar dpr = window.devicePixelRatio;if (devicePixelRatio >= 3 && (!dpr | dpr >= 3) dpr = 3; else if (devicePixelRatio >= 2 && (!dpr | dpr >= 2) dpr = 2; else dpr = 1;docEl.setAttribute('data-dpr', dpr);复制代码 sass

8、相关设置完全根据设计稿尺寸写复制代码/ baseFontSize $baseFontSize: 75;function px2rem($px) return $px/$baseFontSize * 1rem;function px2rem2($px) return px2rem($px*2);复制代码字体大小变化复制代码/ 字体大小计算mixin font-dpr($font-size) font-size: $font-size; data-dpr="2" & font-size: $font-size * 2; data-dpr="3" &a

9、mp; font-size: $font-size * 3; 复制代码 例如：一个简单样式的设置，（在这里设计稿给的尺寸是300*auto，边框是1px）复制代码.test include font-dpr(10px); width: px2rem2(300); margin: 0 auto; border:1px #dcdcdc solid;img display: block; width: px2rem2(355); margin: 0 auto;复制代码效果示例：可以从图中看出，6p的dpr为3，字体相应为30px，页面缩放了3倍，同时，1px边框在设备像素密度为3倍的情况下依旧显示的

10、1px（因为被缩小了），正是我所想要的。 页面demo源码复制代码<!DOCTYPE html><html><head> <title>viewport test</title> <meta charset="utf-8"> <link rel="stylesheet" href="style/style.css"> <script> ;(function (win) var doc = win.document; var docEl =

11、doc.documentElement; var metaEl = doc.querySelector('metaname="viewport"'); if (!metaEl) metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'width=device-width,initial-scale=1.0, maximum-sc

12、ale=1.0, minimum-scale=1.0, user-scalable=no'); if (docEl.firstElementChild) docEl.firstElementCappendChild(metaEl); else var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); / document data-dpr set font-size px var dpr = window.devicePixelRatio; if (

13、devicePixelRatio >= 3 && (!dpr | dpr >= 3) dpr = 3; else if (devicePixelRatio >= 2 && (!dpr | dpr >= 2) dpr = 2; else dpr = 1; docEl.setAttribute('data-dpr', dpr); var scale = parseFloat(1 / dpr).toFixed(2); if (dpr != 1) metaEl.setAttribute('content', 

14、9;width=device-width,initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no'); / document width function setDocumentFontSize () var width = docEl.getBoundingClientRect().width; docEl.style.fontSize = width / 10 + 'px' setDocumentFontSize(); var timer; win.addEventListener('resize', function() clearTimeout(timer); timer = setTimeout(function () setDocumentFontSize(); , 300); , false); )(window); </script></head><body> <div class="test"> 显然，我

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论