rem 之js代碼獲取font-size值(適合移動手機端)

  這兩天學的是自適應,代碼有點亂。而且這幾天忙著寫實習報告,也沒有時間去整理。

  但是,這下面代碼吧,是可以獲取html的font-size值的,然后用來設置相對單位rem的從而達到自適應效果的;看到紅色的width了吧,把它改成你屏幕寬度就好,比如我的是1920px;那么這樣算出來html{font-size:600px}; 這樣的話你要設置其他元素的rem,比如span{font-size:12px;},要自適應就用12/600,就是0.02rem,span{font-size:0.02rem;}這樣你的span字體就隨屏幕大小也變了,或者你要設置圖片啊傻的,也是用它的寬或者高除于600。

  至于你要pc端和手機端分開效果什么的,用@media分別寫CSS樣式就哦了。

?<script>
??????? !(function(doc, win) {
??????????? var docEle = doc.documentElement,//獲取html元素
??????????????? event = "onorientationchange" in window ? "orientationchange" : "resize",//判斷是屏幕旋轉還是resize;
??????????????? fn = function() {
??????????????????? var width = docEle.clientWidth;
??????????????????? width && (docEle.style.fontSize = 100? * (width / 320) + "px");//設置html的fontSize,隨著event的改變而改變。
??????????????? };
?????????? ?
??????????? win.addEventListener(event, fn, false);
??????????? doc.addEventListener("DOMContentLoaded", fn, false);
?????? ?
??????? }(document, window));
??? </script>

轉載于:https://www.cnblogs.com/liaoliao985786516/p/5605274.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/395688.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/395688.shtml
英文地址,請注明出處:http://en.pswp.cn/news/395688.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

關于C#中委托的一點理解

C#中委托是一種類型。可以這么籠統的理解&#xff1a;int型變量代表一個整型&#xff0c;而委托類型的變量代表一個方法的地址&#xff08;將方法名稱傳入constructor并實例化該委托變量&#xff09;。 --By Brisk Yu 1 為何要使用委托 我覺得網上關于什么現實生活的舉例并不好…

阿里的事前驗尸_(不太完全)100天的代碼-驗尸

阿里的事前驗尸by JS由JS (不太完全)100天的代碼-驗尸 ((Not quite) 100 Days of Code — A Postmortem) At the end of last year, I wrote about my experience coding and making daily commits to GitHub for 30 consecutive days. I also pledged to keep the streak goi…

php超市管理系統論文,超市管理系統的設計與實現

當今社會為信息社會&#xff0c;世界已經進入在計算機信息管理領域中激烈競爭的時代。對于一般的商戶而言&#xff0c;雜亂無章地陳放著的商品無疑會耗費他們大量的時間去對其整理并一一分類。他們需要更加便捷的手段去管理他們的商品以節約他們的時間成本以及人工成本。并且就…

只能輸入正整數 以及常用的正則表達式

<input typetext idSYS_PAGE_JumpPage nameSYS_PAGE_JumpPage size3 maxlength5 οnkeyupthis.valuethis.value.replace(/[^1-9]/D*$/,"") οndragenter"return false" οnpaste"return !clipboardData.getData(text).match(//D/)"" sty…

jq 自動滑動輪換(向后插入小塊)

// JavaScript Documentvar Marquee { arrIdObj : {/*marqueebox : {distance:-95,//移動距離delay:3000,//延遲時間speed:1000//移動時間},minCount:2 */}, //創建對象 startMarquee:function(){ //給參數賦值 if(this.arrIdObj ! null && typeof this.arrIdObj &qu…

bzoj 2178 圓的面積并 —— 辛普森積分

題目&#xff1a;https://www.lydsy.com/JudgeOnline/problem.php?id2178 先看到這篇博客&#xff1a;https://www.cnblogs.com/heisenberg-/p/6740654.html 好像本應算弓形面積、三角形面積之類的&#xff0c;但不會...于是用辛普森積分硬做... 參考了這篇博客&#xff1a;ht…

php獲取訪問者ip地址匯總,php獲取訪問者IP地址匯總_PHP

//方法1&#xff1a;$ip $_SERVER["REMOTE_ADDR"];echo $ip;//方法2&#xff1a;代碼如下:$user_IP ($_SERVER["HTTP_VIA"]) ? $_SERVER["HTTP_X_FORWARDED_FOR"] : $_SERVER["REMOTE_ADDR"];$user_IP ($user_IP) ? $user_IP : $…

Charles抓包工具的使用

2019獨角獸企業重金招聘Python工程師標準>>> 感謝唐巧分享的文章&#xff0c;受益匪淺 文章目錄 1. 目錄及更新說明2. Charles 限時優惠3. 簡介4. 安裝 Charles5. 將 Charles 設置成系統代理6. Charles 主界面介紹7. 過濾網絡請求8. 截取 iPhone 上的網絡封包 8.1. …

python每秒20個請求_使用Python每秒百萬個請求

python每秒20個請求by Pawe? Piotr Przeradowski通過Pawe?Piotr Przeradowski 使用Python每秒百萬個請求 (A million requests per second with Python) Is it possible to hit a million requests per second with Python? Probably not until recently.使用Python每秒可以…

iOS開發——處理1000張圖片的內存優化

一、項目需求 在實際項目中&#xff0c;用戶在上傳圖片時&#xff0c;有時會一次性上傳大量的圖片。在上傳圖片前&#xff0c;我們要進行一系列操作&#xff0c;比如&#xff1a;旋轉圖片為正確方向&#xff0c;壓縮圖片等&#xff0c;這些操作需要將圖片加載到內存中&#xff…

jquery ui php,php – 打開帶有動態內容的jQuery UI對話框

我有一個關于jQuery UI對話框的問題,并顯示數據庫中的動態內容.所以我得到了一個web應用程序,我還需要創建一個管理模塊來管理所有用戶和其他信息.我創建了一個頁面,顯示列表中的所有用戶,在每一行中我也創建了一個編輯按鈕.我想這樣做,當你按下用戶的編輯按鈕時,會打開一個對話…

linux shell的單行多行注釋

1.單行注釋&#xff0c;使用符號# echo "123456"echo "test"#echo "comment“ 2. 多行注釋 &#xff08;1&#xff09;使用 :<<! &#xff01; filenametest.txt :<<! fileContentcat $filenamei0 for line in $fileContent dofileList[…

MapReduce Input Split 輸入分/切片

MapReduce Input Split&#xff08;輸入分/切片&#xff09;詳解 public static long getMaxSplitSize(JobContext context) { return context.getConfiguration().getLong(SPLIT_MAXSIZE, Long.MAX_VALUE); } 如果沒有設置這maxsize默認是Long.MAX_VALUE public static long …

win7無損擴大c盤空間_無損網絡導航的空間模型

win7無損擴大c盤空間by Patryk Ada?通過PatrykAda? 無損網絡導航的空間模型 (A Spacial Model for Lossless Web Navigation) In my last post I described the concept of navigation trails as an evolution of the standard tabbed browsing model.在我的上一篇文章中&am…

php訪問者信息,如何通過PHP檢索訪問者的ISP?

我試圖糾正拉姆庫馬爾的答案,但每當我編輯他們的帖子,我將被暫時禁止,我的修改被忽略。(至于為什么,我不知道,這是我第一次也是唯一一次在這個網站上編輯。)由于網站更改和管理員執行基本的bot檢查(檢查標題),他的代碼不再工作:$IP $_SERVER[REMOTE_ADDR];$User_Agent Mozill…

從《在小吃店遇見凱恩斯》初識經濟

最近在看《在小吃店遇見凱恩斯》這本書&#xff0c;算是對經濟和經濟學的初步認識。 那些概念 1. 經濟與經濟學 經濟&#xff1a;經世濟民&#xff0c;經營國家、救贖百姓&#xff0c;發展國家經濟進步、促成人人致富。 經濟學&#xff1a;研究發展國家經濟進步、促成人人致富的…

2pc 3pc_在1990年代如何宣傳PC

2pc 3pcby Ilya Pestov通過伊利亞佩斯托夫(Ilya Pestov) 在1990年代如何宣傳PC (How PCs were advertised in the 1990s) Today, hard drives are boring. You can buy a terabyte hard drive for $50. But back in the day, people would get excited when they saw ads anno…

WPF自定義空心文字

WPF自定義空心文字 原文:WPF自定義空心文字首先創建一個自定義控件&#xff0c;繼承自FrameworkElement&#xff0c;“Generic.xaml”中可以不添加樣式。 要自定義空心文字&#xff0c;要用到繪制格式化文本FormattedText類。FormattedText對象提供的文本格式設置功能比WPF提供…

php默認日志位置,Laravel 修改默認日志文件名稱和位置的例子

修改默認日志位置我們平常的開發中可能一直把laravel的日志文件放在默認位置不會有什么影響&#xff0c;但如果我們的項目上線時是全量部署&#xff0c;每次部署都是git中最新的代碼&#xff0c;那這個時候每次都會清空我們的日志&#xff0c;顯示這不是我們所期望的&#xff0…

【轉】UITableView詳解(UITableViewCell

原文網址&#xff1a;http://www.kancloud.cn/digest/ios-1/107420 上一節中,我們定義的cell比較單一,只是單調的輸入文本和插入圖片,但是在實際開發中,有的cell上面有按鈕,有的cell上面有滑動控件,有的cell上面有開關選項等等,具體參加下面2個圖的對比: 我們可以通過…