移動端屏幕適配 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 移動端屏幕適配與響應式的區別移動端屏幕適配 ...
移動端屏幕適配
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
移動端屏幕適配與響應式的區別
移動端屏幕適配：
移動端
寬高% / rem
字體px
寬高都隨著屏幕變化等比例變化
響應式：
PC+移動端
寬%
高、字體：px
寬度等比例變化，高度不變
簡單適配方案：
simple.js
(function () { 'use strict'; setRemUnit(); window.addEventListener('resize', setRemUnit); function setRemUnit() { var docEl = document.documentElement; var ratio = 18.75; var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth; docEl.style.fontSize = viewWidth / ratio + 'px'; } })();
通用適配方案：
flexible.js
(function () { 'use strict'; // dpr->scale = 1 / dpr var docEl = document.documentElement, viewportEl = document.querySelector('meta[name="viewport"]'), dpr = window.devicePixelRatio || 1, maxWidth = 540, minWidth = 320; dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1); docEl.setAttribute('data-dpr', dpr); docEl.setAttribute('max-width', maxWidth); docEl.setAttribute('min-width', minWidth); var scale = 1 / dpr, content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'; if (viewportEl) { viewportEl.setAttribute('content', content); } else { viewportEl = document.createElement('meta'); viewportEl.setAttribute('name', 'viewport'); viewportEl.setAttribute('content', content); document.head.appendChild(viewportEl); } setRemUnit(); window.addEventListener('resize', setRemUnit); function setRemUnit() { var ratio = 18.75; var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth; if (maxWidth && (viewWidth / dpr > maxWidth)) { viewWidth = maxWidth * dpr; } else if (minWidth && (viewWidth / dpr < minWidth)) { viewWidth = minWidth * dpr; } docEl.style.fontSize = viewWidth / ratio + 'px'; } })();
通用適配案例源碼：
預覽圖
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>通用適配應用</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/icons.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/flexible.js"></script> </head> <body> <header class="header-container"> <div class="navbar"> <div class="navbar-left"> <i class="iconfont icon-scan"></i> </div> <div class="navbar-center"> <div class="searchBox"> <div class="searchBox-prepend"> <i class="iconfont icon-search"></i> </div> <input type="text" class="searchBox-input" placeholder="開學季有禮，好貨5折起"> <div class="searchBox-append"> <i class="iconfont icon-close"></i> </div> </div> </div> <div class="navbar-right"> <i class="iconfont icon-msg"></i> </div> </div> </header> <div class="main-container"> <div class="slider-container"> <img src="img/slider/1.jpg" alt="slider"> </div> <nav class="nav-container"> <ul class="nav"> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/1.png" alt="nav" class="nav-img"> <span class="nav-text">團購</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/2.png" alt="nav" class="nav-img"> <span class="nav-text">一元購</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/3.png" alt="nav" class="nav-img"> <span class="nav-text">優惠券</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/4.png" alt="nav" class="nav-img"> <span class="nav-text">教育</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/5.png" alt="nav" class="nav-img"> <span class="nav-text">旅行</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/6.png" alt="nav" class="nav-img"> <span class="nav-text">線上訂餐</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/7.png" alt="nav" class="nav-img"> <span class="nav-text">慶典</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/8.png" alt="nav" class="nav-img"> <span class="nav-text">秒殺</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/9.png" alt="nav" class="nav-img"> <span class="nav-text">拍賣</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/10.png" alt="nav" class="nav-img"> <span class="nav-text">服務</span> </a> </li> </ul> </nav> <div class="recommend-container"> <ul class="recommend"> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/1.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">歐派整體櫥櫃定製簡約現代</p> <p class="recommend-origPrice"> <del>¥2000.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span> <span class="recommend-count">985件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/2.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">創維55吋4K超高清HDR</p> <p class="recommend-origPrice"> <del>¥2999.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">2299</strong></span> <span class="recommend-count">63件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/3.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">【到手259元】蘇泊爾 5L電壓力鍋</p> <p class="recommend-origPrice"> <del>¥799.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">299</strong></span> <span class="recommend-count">1908件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/4.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">三隻松鼠堅果禮包</p> <p class="recommend-origPrice"> <del>¥125.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span> <span class="recommend-count">9532件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/5.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">藍月亮洗衣液12斤</p> <p class="recommend-origPrice"> <del>¥133.40</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span> <span class="recommend-count">5399件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/6.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">福臨門葵花玉米油</p> <p class="recommend-origPrice"> <del>¥109.90</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span> <span class="recommend-count">6294件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/7.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">TP-LINK 全千兆埠雙頻無線路由器</p> <p class="recommend-origPrice"> <del>¥179.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">169</strong></span> <span class="recommend-count">4255件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/recommend/8.jpg" alt="recommend" class="recommend-img"> </p> <p class="recommend-name">【前1800名再減50】家用高壓洗車機</p> <p class="recommend-origPrice"> <del>¥790.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">268</strong></span> <span class="recommend-count">1599件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p
