Js處理頁(yè)面響應(yīng)式

xiaodao 發(fā)布于2019-08-23 14:57 / 1806人閱讀

摘要：處理頁(yè)面響應(yīng)式原理假定頁(yè)面的寬度為頁(yè)面元素的字體大小為這是比例標(biāo)準(zhǔn)實(shí)際頁(yè)面寬度為，設(shè)置頁(yè)面元素的寬度為現(xiàn)有一設(shè)計(jì)頁(yè)面尺寸放大一倍，設(shè)計(jì)頁(yè)面的如何讓圖片自適應(yīng)首先頁(yè)面注入以下設(shè)置圖片的寬度通過上面公式推出，設(shè)計(jì)頁(yè)面的字體大小為所以圖片上的寬自

js處理頁(yè)面響應(yīng)式原理：
假定頁(yè)面的寬度為320px(iphone5),頁(yè)面元素html的字體大小為20px,這是比例標(biāo)準(zhǔn)
實(shí)際頁(yè)面寬度為clientWidth，設(shè)置頁(yè)面html元素的寬度為 20 * (clientWidth / 320) + "px"
現(xiàn)有一設(shè)計(jì)頁(yè)面,尺寸 720x1080（放大一倍），設(shè)計(jì)頁(yè)面的logo(216x108),如何讓logo圖片自適應(yīng)？
1.首先頁(yè)面注入以下js

(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);

2.設(shè)置圖片的寬度css
通過上面公式推出，設(shè)計(jì)頁(yè)面html的字體大小為（20*720）/320 = 45 px
所以圖片上的寬自適應(yīng)可以設(shè)置為 216/45 rem

.logo{
    width:4.8rem;
}

GPU云服務(wù)器云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101399.html

相關(guān)文章

前端入門24-響應(yīng)式布局（BootStrap）

摘要：聲明聲明本篇內(nèi)容摘抄自以下兩個(gè)來源中文網(wǎng)感謝大佬們的分享。版本是全球最受歡迎的前端組件庫(kù)，用于開發(fā)響應(yīng)式布局移動(dòng)設(shè)備優(yōu)先的項(xiàng)目。官方示例官方示例版本，官方還沒有中文教程，的中文教程倒是很齊全了。聲明本篇內(nèi)容摘抄自以下兩個(gè)來源： BootStrap中文網(wǎng) 感謝大佬們的分享。正文-響應(yīng)式布局（BootStrap）這次想來講講一個(gè)前端開發(fā)框架：BootStrap BootStrap 目前...

lunaticf 2019-04-23 13:06 評(píng)論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評(píng)論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評(píng)論0 收藏0
Rxjs 響應(yīng)式編程-第六章使用Cycle.js的響應(yīng)式Web應(yīng)用程序

摘要：我們將使用，這是一個(gè)現(xiàn)代，簡(jiǎn)單，漂亮的框架，在內(nèi)部使用并將響應(yīng)式編程概念應(yīng)用于前端編程。驅(qū)動(dòng)程序采用從我們的應(yīng)用程序發(fā)出數(shù)據(jù)的，它們返回另一個(gè)導(dǎo)致副作用的。我們將使用來呈現(xiàn)我們的應(yīng)用程序。僅采用長(zhǎng)度超過兩個(gè)字符的文本。 Rxjs 響應(yīng)式編程-第一章：響應(yīng)式Rxjs 響應(yīng)式編程-第二章：序列的深入研究Rxjs 響應(yīng)式編程-第三章: 構(gòu)建并發(fā)程序Rxjs 響應(yīng)式編程-第四章構(gòu)建完整的We...

EastWoodYang 2019-08-26 12:11 評(píng)論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個(gè)專注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的庫(kù)。【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

cfanr 2019-08-20 10:34 評(píng)論0 收藏0