一, 工具:
1,html5 验证工具: https://validator.nu/
2,[modernizr] 用来检测浏览器是否支持 html5,CSS3 元素的 javascript 库: http://modernizr.com/
3,[Respond] 让 IE 低版本支持 css3 Media Query: https://github.com/scottjehl/Respond (配合 modernizr 按需加载)
二, Modernizr 检测方法:
- Modernizr.load({
- test:Modernizr.mq("only all"),
- yep:'js/pass.js', // 检测成功
- nope:'js/respond.min.js', // 检测失败, 加载一个文件
- nope:['js/respond.min.js','css/extra.css'], // 检测失败, 加载多个文件
- both:'js/for-all.js' // 无论检测如何
- })
三, 匹配高分辨率设备
devicePixelRatio 设备像素比
~ 非视网膜屏: window.devicePixelRatio = 1
~ios 视网膜屏: window.devicePixelRatio = 2
~android 视网膜屏: window.devicePixelRatio = 1.5
在 iOS 设备, screen.width 乘以 devicePixelRatio 得到的是物理像素值.
在 Android 以及 Windows Phone 设备, screen.width 除以 devicePixelRatio 得到的是设备独立像素 (dips) 值.
- // 普通图片: logo2.png
- // 高清图片: logo2@x2
- @media all and(-webkit-min-device-pixel-ratio:1.5){
- .test{background-image:(../images/logo2@x2.png)}
- }
- @media only screen and (-webkit-min-device-pixel-ratio:1.25),only screen and (min-resolution: 120dpi),only screen and (min-resolution:1.25dppx) {
- }
- if(window.devicePixelRatio && window.devicePixelRatio>1.5){
- // 视网膜高清屏
- }else{
- // 非视网膜高清屏
- }
代码片段 1
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>rem phone test</title>
- <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <style>
- html {
- height: 100%;
- width: 100%;
- font-family: 'Heiti SC', 'Microsoft YaHei';
- font-size: 20px;
- overflow: hidden;
- outline: 0;
- -webkit-text-size-adjust:none;
- }
- body {
- height: 100%;
- margin: 0;
- overflow: hidden;
- -webkit-user-select: none;
- position: relative;
- }
- header,
- footer {
- width: 100%;
- line-height: 1.5rem;
- font-size: 1rem;
- color: #000;
- border: 1px solid #ccc;
- text-align: center;
- background-color: #ccc;
- }
- .bd {
- margin-top: 1rem;
- margin-bottom: .5rem;
- margin-right: -.5rem;
- font-size: 0;
- }
- .box {
- width: 5rem;
- height: 5rem;
- display: inline-block;
- margin-right:.5rem;
- margin-bottom: .5rem;
- }
- .blue-box {
- background-color: #06c;
- }
- .org-box {
- background-color: #1fc195;
- }
- </style>
- </head>
- <body>
- <header > 我是头部</header>
- <div class="bd">
- <div class="box blue-box"></div>
- <div class="box org-box"></div>
- <div class="box blue-box"></div>
- <div class="box org-box"></div>
- <div class="box blue-box"></div>
- <div class="box org-box"></div>
- </div>
- <footer > 我是页脚</footer>
- <script>
- (function (doc, win) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (!clientWidth) return;
- docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
- };
- if (!doc.addEventListener) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false);
- })(document, window);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16850/ea22cbc4b54c0b979ad3bd7f95f9668c.html