㈠ 使用js 計算rem 如何使該段js最優先執行
直接寫在html頁面把,不要寫onload事件。在抄js裡面首行寫$(document).ready(function(){}),然後把一些需要頁面一載入就執行的代碼寫在function()裡面,也可以在頁面剛載入時執行。呵呵
㈡ 前端移動端rem頁面怎麼寫js代碼怎麼寫
首先rem是根據--根節點的字體大小控制rem的大小。
先按照設計圖的尺寸用px單位把整個頁面寫出來.....然後網上找px轉換rem的工具,也可以自己算。。最後就是設置html的font-size了..這個要用px來做單位...這樣就可以控制單位為rem的大小了。。(控制html的字體大小可以用@media根據不同的屏幕來設置,,也可以用js獲取屏幕寬度或高度來計算。。然後設定字體大小)...2017-08-17 9.54
㈢ Rem及其使用
(font size of the root element)是指相對於根元素的字體大小的單位
目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。即使瀏覽器不支持rem,就多寫一個絕對單位的聲明即可,瀏覽器會忽略用rem設定的字體大小。
(1)首先瀏覽器的默認字體大小是16px
(2)100%=16px => 6.25%=1px => 62.5%=10px,因為rem是相對於根元素,因此在css的html中全局聲明font-size=62.5%,此時的1rem就睜閉等於10px,這樣一來rem和px之間的換算就比較簡單,使用起來更方便
(3)使用JS根據瀏覽器寬度(或瀏覽器可視區域寬度(clienWidth))動態設置html的大小
通過JS動態設置根元素的font-size,這樣的好處是悉豎裂所有設備解析度都能兼容適配,淘寶首頁目前就是用的JS計算。如果不用JS也是可以做適配的,一纖空般我們在做web app都會先統計自己網站有哪些主流的屏幕設備,然後去針對這些設備去做media query設置也可以實現適配,如:
(4)使用媒體查詢設置根元素大小——rem和px在響應式中的應用對比,如:
(5)Rem自適應JS,現在也有封裝好的JS供我們直接使用
(6)屏幕適配還有一種簡單粗暴的做法,即設置viewport進行縮放
天貓web app的首頁就採用過這種方式,以320寬度為基準,進行縮放,最大縮放為320*1.3 = 416,基本縮放到416都就可以兼容iphone6 plus的屏幕了,這個方法簡單粗暴,又高效。