1. 程式人生 > >手機移動端rem設定

手機移動端rem設定

function adapt(designWidth, rem2px){
      var d = window.document.createElement('div');
      d.style.width = '1rem';
      d.style.display = "none";
      var head = window.document.getElementsByTagName('head')[0];
      head.appendChild(d);
      var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
      console.log("defaultFontSize",defaultFontSize);
      d.remove();
      document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
      var st = document.createElement('style');
      var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
      var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"

      var st = document.createElement("style");
      var portrait = "@media screen and "
      st.innerHTML = portrait + landscape;
      head.appendChild(st);
      return defaultFontSize
    };
    var defaultFontSize = adapt(750, 100);

相關推薦

手機移動rem設定

function adapt(designWidth, rem2px){ var d = window.document.createElement('div'); d.style.width = '1rem'; d.style.dis

移動rem設定

window.onload = function(){ /*720代表設計師給的設計稿的寬度,你的設計稿是多少,就寫多少;100代表換算比例,這裡寫100是 為了以後好算,比如,你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等

移動rem布局,用戶調整手機字體大小或瀏覽器字體大小後導致頁面布局出錯問題

nts set add orien lar med urn bsp jsse 一、用戶修改手機字體設置大小,影響App裏打開的web頁面。手機字體設置大小,影響App的頁面。Android的可以通過webview配置webview.getSettings().setText

移動字型設定rem。和相容。

移動端字型單位font-size選擇px還是rem?一:做少部分手機適配可以用px。二:當要適配各種手機端裝置時用rem。*二:1.使用rem來設定Web頁面的字型大小;2.rem是相對於根元素<html>;3.rem能等比例適配所有螢幕4.在根元素<htm

移動設定(使用rem作為單位)

頭部設定,計算畫素比pixelRatio並且還原畫素比。計算出fontSize,根據當前fontSize得出rem,製作移動端頁面。 <script type="text/javascript"> function setS(){var pixelRatio =

JS判斷客戶是否是iOS或者Android手機移動

mac os oid dex 手機移動 match var 移動 瀏覽器 type <script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf(

移動rem切圖

footer thead table nts 等比例縮放 tab applet value details 1.為什麽用rem 根據屏幕大小,自動調整大小 2.如何使用rem 分以下幾步 a.用ps把設置稿弄成640px或者750px的(記得等比例縮放) b.調試時記得把瀏

移動rem設置(部分安卓機型不兼容)

settime body 安卓 屏幕 gpo color ref rect() refresh (function(win) { var doc = win.document; var docEl = doc.documentElement;

h5手機移動 <head> <meta charset="big5"> </head>

h5h5手機移動端<head><meta charset="big5"><title>ch05_02</title></head> 說明:<meta charset="UTF-8">charset=

解決移動rem+百分比布局加載瞬間頁面錯亂的方法

fontsize style body 推薦 原生 html 錯亂 document font 1.JS加載順序與加載方法 頁面加載順序通常是”從上往下”加載的,所以在內容區域,也就是body以及body包含的DOM還未被瀏覽器遍歷之前,我們就應該將html的font-si

移動rem匹配

nts script ldo center sca mile font text app Rem是相對於根元素font-size大小的單位 記inphone5屏幕寬度是 320px font-size16px 1rem=16px <html> <h

JS判斷客戶是否是iOS或者Android手機移動(轉載)

urn text span var 代碼塊 san bsp 判斷瀏覽器 ride 前言:   上午有一個移動端的項目負責人問我,在ios系統上樣式出現問題,因為內核原因,我改來改去,在ios弄好了,但在安卓有問題了,突然想到了一種辦法,既然ios是一種機型,安卓是一種機型,

購買網易企業郵箱後,怎麽用手機移動辦公?

碎片 移動 出了 微信公眾號 提醒 微信小程序 展示 十分 提高 手機端辦公能提高我們的辦公效率,利用碎片化的時間可以做到處理公事,可以不需要背著沈重的電腦處理工作了。電子郵箱也早早跟上了移動端辦公的步伐,不論是安卓系統或是蘋果系統,都能用於處理郵件。今天簡單說說,購買網易

移動rem適配 flex.js

(function() { document.addEventListener('DOMContentLoaded', function () { var html = document.documentElement; var windowWidth = html.clientWi

手機移動返回頂部js程式碼

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

手機移動展現報表的那些事兒

在各企業中或者電商平臺的商家,業務方,每天都有大量的人需要線上檢視大量的指標,用於監控、分析關鍵業務資料的發展趨勢。同時,又有著能夠隨時隨地,方便快捷的檢視分析資料的訴求。我們習慣於,使用潤乾報表在 PC 端或大屏中展現,但是你知道嗎?潤乾報表 V2018 是以 HTML5 方式輸出,不僅支援在 P

移動rem怎樣適配

向貓咪提問 一般我們在公司開發頁面,UI設計圖是出750px的圖,也就是基於Iphone 6 設計的圖。如果我們用如果得當的配置,UI圖上的東西是多少px,我們就寫多少px,這是程式設計師最方便的。但是這個是怎麼配置的呢? 不要方,其實很簡單,跟著思路走起來~~~ 如果不配置

手機移動下拉框

手機移動端下拉框 效果 -開啟 點選 選中 新增base.css樣式 新增jquery.min.js 新增font-awesome-4.7.0資料夾,用於改變下拉框後面的圖示為箭頭

移動rem.js使用方法

下面的程式碼一是我根據rem的使用經驗,自己寫的一個rem.js,發現很好用,能適用所有移動端h5頁面的自適應需求: 程式碼一: ``` window.onload = function(){ /*720代表設計師給的設計稿的寬度,你的設計稿是多少,就寫多少;100代表換算比例,這裡寫100是 為了以

手機(移動)點選事件失效問題

1.問題重現: 微信ios內建瀏覽器認為,不是button  a標籤之外的非點選元素  比如div  是不可點選的,比如給div綁了click事件   在微信裡邊是不生效的,解決辦法是給這個div元素新增一個樣式屬性cursor: poi