2. 程式人生 > >rem自適應佈局-移動端自適應必備

rem自適應佈局-移動端自適應必備

阿新 • • 發佈：2018-12-23
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib
.flexible = {}); if (metaEl) { console.warn('將根據已有的meta標籤來設定縮放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl
) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale
= parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他裝置下，仍舊使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {}));

相關推薦

使用Flexible實現手淘H5頁面的終端適配rem自適應佈局-移動端自適應必備

曾幾何時為了相容IE低版本瀏覽器而頭痛，以為到Mobile時代可以跟這些麻煩說拜拜。可沒想到到了移動時代，為了處理各終端的適配而亂了手腳。對於混跡各社群的偶，時常發現大家拿手機淘寶的H5頁面做討論——手淘的H5頁面是如何實現多終端的適配？ 那麼趁此Amfe阿里無線前端團

rem自適應佈局-移動端自適應必備

;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); va

rem自適應佈局-移動端自適應必備:flexible.js

由於移動端特殊性，本文講的是如何使用rem實現自適應，或叫rem響應式佈局，通過使用一個指令碼就可以rem自適應，不用再為各種裝置寬度不同而煩惱如何實現自適應的問題。 rem是相對於根元素，這樣就意味著，我們只需要在根元素確定一個px字號，則可以來算出元素的寬

rem結合scss解決移動端自適應大小

原因 我們眼中看到的螢幕是由一個一個物理畫素組成的，而我們css使用的是邏輯畫素，也可以成為虛擬畫素。在我們呈現結果的終端，它們的畫素比可能都不一樣，這時候我們要採用裝置的畫素比（DPR），它體現了物理畫素和邏輯畫素之間的關係，計算公式如下所示： DP

移動端自適應佈局方案-rem佈局.md

Rem是CSS3新引入的單位，通過動態設定根元素html的font-size，等比縮放元素大小以達到適應移動裝置的目的。 在W3C官網上是這樣描述rem的——“font size of the root element” 。 當我們指定一個元素的font-size為2

移動端自適應佈局解決方案：rem佈局

      之前寫了一篇rem佈局的文章，今天拿出來發現已經過時了。於是再來寫一遍！        2018.10.24更新       首先在html裡面設定一下視口： <meta

移動端自適應佈局----rem字型

一.px,em,rem之間聯絡與區別 px：畫素是相對於顯示器螢幕解析度而言的相對長度單位，不會受螢幕寬度改變 em：繼承父級的font-size，與父級的字型大小有關rem：是em的升級版，rem只會相對html的值，不會受到父級的影響。 二.移動端怎麼用rem 假設設

移動端自適應佈局解決方案——rem

自適應佈局方案有百分比佈局、flex佈局、彈性flex佈局等，但是都有一些缺點。 百分比佈局缺點：字型大小需要另外一套自適應方法來調整；當螢幕寬度大於700px後，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。 flex佈局、彈性flex佈局：在移動端會出現一些支援的相容問題。 rem W3C官

基於REM的移動端自適應佈局方案

背景現在工作中有超過一半的時間用於移動端專案的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式佈局的要求更高，不能像PC頁面一樣設計幾個斷點利用媒體查詢，兩邊留空白就解決。移動端頁面需要把螢幕空間都利用上，而移動裝置的

移動端自適應rem的設置

需要 spa 移動端 size 開發 .get 字體大小 問題 one 一般所熟知的css樣式大小單位有px，em。 px：精確地描述元素大小，不隨屏幕大小的變化而變化； em：相對於父元素的大小，如果有層層嵌套的話會導致這個值非常大或者非常小。 在寫移動端頁面的時候為了使

移動端自適應適配佈局的方法總結

原文出處：https://blog.csdn.net/zmm13298329239/article/details/83307842  延伸閱讀：移動前端自適應適配佈局解決方案和比較 方法一：rem佈局（個人最喜歡的方法） 首先確定你的設計稿是基於iphone6還是iphone4

淺談移動端的自適應問題——響應式、rem/em、利用Js動態實現移動端自適應

隨著3G的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？本篇文章將講述自適應網頁設計的概念和方法，使網頁開發人員維護同一個網頁程式碼，即可使網站在多種裝置上具

【css】移動端自適應佈局與字型大小自適應

一、vw, vh vw它是根據可視區的寬度來計算的。 vh它是根據可視區的高度來計算的。 <body> <style> body { margin:0; } .te

rem做到pc端到移動端自適應

將下面自適應js程式碼放到head下面body上面 adaptive(document, window);//初始載入自適應 function adaptive(doc, win) { var docEl = doc.documentElement, resizeEvt

js自適應rem -- 主要適用於移動端

rem是指相對於根元素(html)的字型大小的單位, 利用它能實現強大的螢幕適配佈局。下面主要應用的是基於js去調整根元素字型大小， 從而實現各個尺寸螢幕的適配； //designWidth:設計稿的實際寬度值，需要根據實際設定 //maxWidt

移動端自適應rem演算法

關於rem使用一般移動端設計稿為640*1136,（px）,假設我們設定html的font-size為10px即1rem=10px;我們以iphone5為瀏覽裝置為標準制作，那麼我們在切圖寫頁面的時候，rem和px這個關係是怎樣處理的呢？（注：iphone5解析度為320*

解決移動端自適應問題——rem

為了充分還原設計稿，適配各種螢幕大小，px已然是不能用了，em這種相對父元素來計算的太麻煩，對此還是rem靠譜，首先介紹下rem: rem是css3引進的新單位，在W3C-官網是這樣描述rem的——”font size of the root element”

pc移動端自適應佈局js指令碼（一）

(function(){ //點選一級目錄 $(".first-leve-div span").click(function(e){ e.stopPropagation(); $(this).next("ul").slideT

pc移動端自適應佈局html頁面（二）

效果圖<!doctype html> <html lang=""> <head> <meta charset="utf-8"> <meta name="description" content=""&

pc、移動端 自適應佈局方案

1、PC端 做一個PC端的網頁,設計圖是1920X1080的. 要在常見屏上顯示正常(比例正確可) 1280X720 1366X768 1440X900 1920X1080 使用了以下幾種方案 1.內容在一屏內顯示的,採用了(內容框)上下左右居中的辦法,裡面