js判斷瀏覽器類型

時間  2019-12-10
標籤 判斷 瀏覽器 類型 欄目 JavaScript 简体版
原文   原文鏈接

js判斷瀏覽器類型javascript

 <script type="text/javascript" >
     <!--
  function getOs()
  {
      var OsObject = "";
     if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {
          return "MSIE";
     }
     if(isFirefox=navigator.userAgent.indexOf("Firefox")!=-1){
          return "Firefox";
     }
     if(isChrome=navigator.userAgent.indexOf("Chrome")!=-1){
          return "Chrome";
     }
     if(isSafari=navigator.userAgent.indexOf("Safari")!=-1) {
          return "Safari";
     } 
     if(isOpera=navigator.userAgent.indexOf("Opera")!=-1){
          return "Opera";
     }
  
  }
   alert("type -> "+getOs());
  -->
 </script>css

網頁怎樣在分辨率不一樣的電腦上全屏顯示html

第一種方法：作一個網頁解決問題（長了點）java

　　若是隻是由於瀏覽者改變了瀏覽器的設置，或者由於瀏覽器不兼容，使本身精心製做的網頁變得"面目全非"，那多使人沮喪！下面咱們以網頁愛好者的經常使用工具Dreamweaver（如下簡稱DW）爲例，列出幾個網頁製做初學者較常見的網頁佈局問題以及解決方法，但願對初學者們有所幫助。bootstrap

　　1、消除任意縮放瀏覽器窗口對網頁的影響swift

　　一番辛苦作出來的網頁，在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小以後，網頁就變得"不堪入目"了，這是個很值得注意的問題。瀏覽器

　　問題的根源還得從網頁的佈局提及，在DW中，網頁內容的定位通常是經過表格來實現的，解決表格的問題也就成功了大半。網絡

　　你們應該注意到，在DW中表格屬性面板的高寬設定選擇上提供了兩種不一樣類型：百分比和像素值。百分比的使用將會產生前面說到的那個毛病。這裏所說的百分比是指表格的高或寬設置爲上層標記所佔區域高或寬的百分比，如在一個表格單元的寬度是600，在它裏面嵌入了另一個表格，表格寬度佔表格單元的50%，則這個表格的寬度爲300，依此類推，若是在一個表格不是嵌於另外一個表格單元中，則其百分比是相對於當時窗口的寬度的。IE瀏覽器中，隨便改動主頁窗口的大小時，表格的內容也隨之錯位、變形，就是由於表格的百分比也要隨着窗口的大小而改變成相應的百分比寬度。閉包

　　天然，解決這個問題的辦法就是將表格寬度設置成固定寬度（也就是像素值）。另外若是外層表格已作好固定寬度設置，內層表格也能夠適當使用百分比設置。清楚這個原則之後，若是出現相似的問題你們也知道怎麼解決。iphone

　　2、讓網頁居中

　　說到了窗口大小就會順着路子想到分辨率的問題，在800×600分辨率下製做的網頁在1024×768分辨率的機器上打開，整個網頁就會跑到左邊；1024×768分辨率的網頁在800×600分辨率的機器上有時也會變得"不堪入目"。兩種分辨率各作一個吧？作起來費時，看起來也費勁。怎麼辦呢？

　　如今大多數網民都還在用800*600的分辨率，因此咱們通常能夠以此分辨率爲主，要想讓網頁在1024*768時居中，只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個就是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。若是你的表格寬度設的是百分比，那麼使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種狀況下，800×600支持的表格寬度爲780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。


　　<html> 
　　<head></head> 
　　<body topmargin=0 leftmargin=0> 
　　<center> 
　　　　<table cellspacing cellpadding width=760><tr><td></td></tr></table> 
　　</center> 
　　</body> 
　　</html>

 

　3、定義固定大小的文字

　　你們都知道,在IE瀏覽器的功能設置中，有一個能夠自由設置窗口內容字體大小的功能，這樣因爲不一樣訪問者的設置習慣不一樣，呈如今他們面前的網頁有時也會不不相同。好比你可能原本設計時用的是2號字體，結果因爲用戶對瀏覽器的額外設定，變的更大了，這時你的網頁也可能變得"不堪入目"。雖然不是你的錯，但客戶是上帝。

　　若是使用了網頁中的CSS樣式表技術，就不會出現上述狀況了。使用快捷鍵"Shift+F11"打開樣式表"CSS style"編輯器，在窗口中單擊鼠標右鍵執行"New CSS style..."命令新建一個樣式表，而後在給出的列表中選擇"類型"選項，定義文字屬性參數（通常文字的大小選擇12px較爲適宜）。完成後選擇網頁編輯窗中的文本，單擊新的樣式表名稱，能夠看到選中的文本發生了變化。預覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。

　　4、讓網頁適應不一樣的瀏覽器

　　瀏覽器的格局如今是兩分天下，一分是IE，另外一分是NetScape，在國內Ie有絕對的佔有率，在這種狀況下咱們設計的網頁只要兼容它就好了，但NetScape在國外仍是有不少人使用，畢竟它是瀏覽器的元老。

　　雖然沒有辦法作出讓全部瀏覽器都兼容的網站，但只要注意如下幾點，作出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：

　　不要混合使用層和表格排版，若是是父子關係，如層中表格，不在此原則範圍內。

　　內聯式的 CSS 在 Netscape Navigator 中常常會出現問題，使用鏈式或內嵌式。

　　有時須要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 裏的效果。

　　對於只有幾個像素寬度或高度的層，改用圖片來實現。

　　避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。

　　第二種方法：作兩個適合不一樣分辨率的頁面，一個是800×600，一個是1024×768，在800×600的頁面中加入一下代碼就能夠實現跳轉了：
　
　　解決分辨率問題在Dreamweaver中沒有此項功能，咱們只能手動加入一段JavaScript代碼。首先在change－ie.html或change－nc.html頁面代碼中的< head>和< /head>中加入如下代碼：

　　 < script language=javascript> 
　　 < !－－ 
　　 function redirectPage(){ 
　　 var url800x600=〃index－ie.html〃; //定義兩個頁面，此處假設index－ex.html和1024－ie.html同change－ie.html在同一個目錄下 
　　 var url1024x768=〃1024－ie.html〃; 
　　 if ((screen.width==800) ＆＆ (screen.height==600))　//在此處添加screen.width、screen.height的值能夠檢測更多的分辨率 
　　 window.location.href= url800x600; 
　　 else if ((screen.width==1024) ＆＆ (screen.height==768)) 
　　 window.location.href=url1024x768; 
　　 else window.location.href=url800x600; 
　　 } 
　　 // －－> 
　　 < /script>

　　 而後再在< body…>內加入onLoad=〃redirectPage()〃

　　 最後，一樣地，在< body>和< /body>之間加入如下代碼來顯示網頁的工做信息：

　　 < script language=JavaScript> 
　　 < !－－ 
　　 var w=screen.width 
　　 var h=screen.height 
　　 document.write(〃系統已檢測到您的分辨率爲:〃); 
　　 document.write(〃< font size=3 color=red>〃); 
　　 document.write(w＋〃×〃＋h); 
　　 document.write(〃< /font>〃); 
　　 document.write(〃正在進入頁面轉換,請稍候…〃); 
　　 // －－> 
　　 < /script>

 

判斷讀者瀏覽器類型和屏幕分辨率，自動調用不一樣CSS

 
咱們在設計網頁的時候一個比較頭痛的問題是究竟咱們的瀏覽者的分辨率是多少？若是使咱們的瀏覽者可以更好的去瀏覽到個人網頁，這個是咱們設計前必須思考的問題。因此Leying在設計網頁的時候第一個想的是兼容如今大多數瀏覽者的屏幕分辨率，這裏頭有幾種最經常使用的方法：

    一、硬行把網頁先用表格框起來，框的分辨率應該是在760－780象素，其他的空間能夠給一個背景圖或者空白.
    二、用自動縮放的方法也能夠實現，這種方法比較古老，並且很簡單，這個很少說了；

    三、用自動判斷的方法。

    今天，就第三種方法來講說，如何來判斷出瀏覽者的屏幕分辨率，根據不一樣的分辨率給予讀者不一樣的瀏覽內容：

    網絡上也有一些能自動判斷出你的瀏覽器是什麼類型或者什麼版本的代碼，集成過來。

   1、既判斷分辨率，也判斷瀏覽器，使之成爲判斷瀏覽器類型屏幕分辨率自動調用不一樣CSS的代碼。

 
<SCRIPT LANGUAGE="JavaScript">
< !--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//若是瀏覽器爲Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//若是瀏覽器爲其餘
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}

function setActiveStyleSheet(title){
  document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
< /SCRIPT>


    爲了你們明白，這裏簡單解析一下：

引用內容 引用內容

var IE1024="";

var IE800="";

var IE1152="";

var IEother="";


    引號裏面分別填寫，用戶使用IE的時候而且分辨率爲1024*768,800*600,1152*864要使用的css文件名。


 

var Firefox1024="";

var Firefox800="";

var Firefox1152="";

var Firefoxother="";


    引號裏面分別填寫，用戶使用FireFox（一個也很流行的瀏覽器）的時候而且分辨率爲1024*768,800*600,1152*864要使用的css文件名。


var Other1024="";

var Other800="";

var Other1152="";

var Otherother="";


    引號裏面分別填寫，用戶使用其餘瀏覽器的時候而且分辨率爲1024*768,800*600,1152*864要使用的css文件名。

   2、不判斷分辨率，只判斷瀏覽器實現根據瀏覽器類型自動調用不一樣CSS。

 
<SCRIPT LANGUAGE="JavaScript">
< !--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//若是瀏覽器爲IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//若是瀏覽器爲Firefox
setActiveStyleSheet("default2.css");
}else{
//若是瀏覽器爲其餘
setActiveStyleSheet("newsky.css");
}
}

function setActiveStyleSheet(title){
  document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
< /SCRIPT>


    解釋：（和前面的差很少）

      若是瀏覽器爲IE，則調用default.css

      若是瀏覽器爲Firefox，則調用default2.css

      若是瀏覽器爲其餘，則調用newsky.css

    使用方法：

      很簡單，放在 「</head>」 前面便可。
 
 

頁面在不一樣屏幕分辨率下存在的問題及解決辦法

（未考慮800*600或更低分辨率的狀況）

一 問題

在不一樣分辨率下，頁面佈局存在不一樣程度的差別，特別是頁面上的表單控件，其寬度默認是固定值「width:150px」，當分辨率較高時，表格中的空白顯得過多，頁面佈局顯得很不協調，在寬屏顯示器上尤其明顯。

二 解決辦法

方法1. 爲不一樣分辨率單獨作樣式文件，在頁面頭部用js判斷分辨率後動態加載定義好的樣式文件。樣式文件命名格式如：forms[_屏幕寬度].css，樣式文件中只需從新定義文本框和下拉框的寬度便可。

在包含的頭文件headr.inc中加入js代碼：

if(screen.width > 1024){

document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');

}

forms_1280.css文件內容：

/* 分辨率寬度爲1280的時候，文本框和下拉框的寬度屬性(width)單獨定義

* 參考計算方法爲：（分辨率寬度-174）/4 * 0.7

* 左側菜單欄寬度爲174px；右側頁面表格是4列；控件寬度爲單元格的70%

* (1280-174)/4*0.7 = 193

*/

input.text

{

background:#FFFFFF;

border:1px solid #B5B8C8;

padding:3px 3px;

height:22px;

line-height:18px;

vertical-align:middle;

padding-bottom:0pt;

padding-top:2px;

width: 193px;

color: #333;

}

select.select{

width: 193px;

}

優勢：實現很簡單，代碼量少；而且可針對不一樣分辨率作更細粒度的頁面控制。

缺點：無明顯缺點。

方法2 將整個頁面的寬度設置爲固定值，並使其居中顯示。

優勢：能夠很大程度的消除不一樣分辨率下的顯示差別。

缺點：分辨率寬度大於這個固定值的時候，頁面兩邊會出現空白。

方法3 用js判斷分辨率，修改body的zoom屬性（IE特性），便可實現對整個頁面進行縮放，相似IE8或其它瀏覽器提供的縮放功能。

優勢：實現簡單，頁面能進行縮放。

缺點：縮放是寬度和高度的等比縮放，高分辨率下字體、圖片看起來會變小，問題解決的不完全。

 

三 總結

推薦方法1。頁面佈局的變化和分辨率的寬度有密切關係，和高度關係不大；經常使用的分辨率寬度也就幾種，作幾個簡單的css文件便可。

閉包

閉包
所謂「閉包」，指的是一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。
閉包是指能夠包含自由（未綁定到特定對象）變量的代碼塊；這些變量不是在這個代碼塊內或者任何全局上下文中定義的，而是在定義代碼塊的環境中定義（局部變量）。「閉包」 一詞來源於如下二者的結合：要執行的代碼塊（因爲自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放）和爲自由變量提供綁定的計算環境（做用域）。在PHP、Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等語言中都能找到對閉包不一樣程度的支持。
JS裏的function能訪問它們的：
　　1. 參數
　　2. 局部變量或函數
　　3. 外部變量（環境變量？），包括
3.1 全局變量，包括DOM。
3.2 外部函數的變量或函數。
　　若是一個函數訪問了它的外部變量，那麼它就是一個閉包。
　　注意，外部函數不是必需的。經過訪問外部變量，一個閉包能夠維持（keep alive）這些變量。在內部函數和外部函數的例子中，外部函數能夠建立局部變量，而且最終退出；可是，若是任何一個或多個內部函數在它退出後卻沒有退出，那麼內部函數就維持了外部函數的局部數據。
 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一. 在HTML的頭部加入meta標籤

　　　　在HTML的頭部，也就是head標籤中增長meta標籤，告訴瀏覽器網頁寬度等於設備屏幕寬度，且不進行縮放，代碼以下：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

 

 　　　　簡單分析一下這一行代碼的含義：width=device-width表示網頁的寬度等於設備屏幕的寬度，initial-scale=1.0表示設置頁面初始的縮放比例爲1，user-scalable=no表示禁止用戶進行縮放，maximum-scale=1.0 和 minimum-scale=1.0 表示設置最大的和最小的頁面縮放比例。由於各大瀏覽器對meta標籤的解析程度不同，因此咱們要儘量的去兼容全部瀏覽器。

 

　　二. 百分比佈局

　　　　在頁面佈局中，相對寬度和絕對寬度相結合來進行佈局，將更有利於網頁的可維護性。

　　　　下圖分別是拉勾網在iPhone五、iPhone6和iPhone 6 Plus下的佈局，能夠看到隨着設備的屏幕寬度不一樣，即便是同一套網頁代碼顯示出來的字體大小以及間隔也都不同。紅線框內部分就是使用了百分比佈局的作法，對於網頁的可維護性將更好。

                     

 

　　三.  響應式頁面的實現

　　　　目前通常常見的實現響應式有兩種方法，一種是利用媒體查詢，另一種是bootstrap下的柵格佈局，之後介紹bootstrap的時候來介紹柵格佈局，這裏主要來講一下如何利用媒體查詢實現響應式佈局。

　　　　媒體查詢，即 @media 查詢，媒體查詢能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。由於是設置樣式，因此將媒體查詢相關的代碼放在css文件的最下方便可。

　　　　爲了更加清晰地理解響應式的用法，我在下方列舉了兩個案例。第一個案例比較簡單，實現了在不一樣的頁面寬度中改變body的背景顏色的做用。第二個案例以具體的項目來舉例，更加方便用戶

實例1：

若是頁面寬度小於 300 像素,則修改body的背景顏色爲紅色:

@media screen and (max-width: 300px) {
    body {
         background-color:red;
    }
}

 若是頁面寬度大於 300 像素而且小於600像素，則修改body的背景顏色爲綠色:

@media screen and (min-width: 300px) and (max-width:600px) {
    body {
         background-color:green;
    }
}

若是頁面寬度大於 600 像素，則修改body的背景顏色爲藍色:

@media screen and (min-width: 600px) {
    body {
         background-color:blue;
    }
}

 

代碼解釋：

　　screen 表示電腦屏幕，平板電腦，智能手機等，min-width和max-width 用於定義設備中頁面的最小和最大寬度。

 

實例2：視覺中國首頁(http://www.shijue.me/)的響應式實現

　　首先來看該頁面在不一樣窗口中的展現效果：

　　在窗口寬度大於1200px時候的頁面樣式以下：

 

　　在窗口寬度大於900px而且小於1200px時候頁面樣式以下：

 

當頁面寬度小於900px時候頁面樣式以下：

 

接下來咱們來看具體的代碼實現：

　　html代碼以下：注意有幾張圖片則寫幾個col

複製代碼 
<div class="group_wrap">
    <div class="group">
        <div class="col">
            <div class="img_logo">
                <img src="img/8.jpg" alt="">
            </div>
        </div>
        <div class="col">
            <div class="img_logo">
                <img src="img/9.jpg" alt="">
            </div>
        </div>
    </div>
</div>
複製代碼

 

css代碼以下，默認是頁面寬度大於1200px時候的頁面：

複製代碼 
.group_wrap{
    width: 100%;
    overflow: hidden;
}
.group{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.col{
    width: 280px;
    margin: 10px;
    float: left;
}
.img_logo{
    padding: 10px;
    background: white;
}
複製代碼

 

 實現響應式代碼以下，放在css文件的最下方便可：

複製代碼 
/*當頁面的寬度在900px ~ 1200px之間的時候*/
@media screen and (min-width: 900px) and (max-width: 1200px){
    .group{
        width: 900px;
    }
}
/*當頁面的寬度在600px ~ 900px之間的時候*/
@media screen and (min-width:600px) and (max-width: 900px){
    .group{
        width: 600px;
    }
}
複製代碼

 

總結：實際上響應式頁面的實現很是簡單，只要認真學，常常練，必定能夠熟練掌握的！

 

　　

四. 頁面使用相對字體

　　在咱們日常的網頁佈局過程當中常用絕對單位像素(px)來進行佈局，這樣的佈局不適合咱們自適應網頁的實現，因此咱們如今來介紹兩種常見的絕對單位em和rem。rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很類似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

　　1. 相對長度單位em

　　　　　　em的特色 : ① em的值並非固定的; ② em始終會繼承父級元素的字體大小。

　　　　　　廢話很少說，直接上代碼：

html代碼：

複製代碼 
<div class="one">
    <span>第一層</span>
    <div class="two">
        <span>第二層</span>
        <div class="three">
            <span>第三層</span>
        </div>
    </div>
</div>
複製代碼

 

css代碼：

複製代碼 
body{
    font-size: 20px;
}
.one{
    font-size: 1.5em;
}
.two{
    font-size: 0.5em;
}
.three{
    font-size: 2em;
}
複製代碼 
結果： 
　　　.one  --->  30px    1.5 * 20 = 30px
　　　.two  --->  15px    0.5 * 30 = 15px
　　　.three ---> 30px     2  * 15 = 30px  

代碼分析：
　　em會繼承父級元素的字體大小，對於大多數瀏覽器而言，若是沒有給body字體大小，則默認爲16px,因此對於class名稱爲 one 的div而言，它的父親是body，因此 1em = 16px; 本案例中規定了body的字體大小爲20px,因此對於 .one 而言，1em = 20px ,那麼 1.5em = 30px。因此 one 的 font-size 爲30px。
　　對於class名稱爲 two 的div而言，它的父親是 one ,由於em會繼承父級的元素的字體大小，因此 1em = 30px, 那麼 0.5em = 15px，因此 two的 font-size爲15px。
　　對於class名稱爲 three 的div而言，它的父親是 two ,由於em會繼承父級的元素的字體大小，因此 1em = 30px, 那麼 0.5em = 15px，因此 two的 font-size爲15px。

 

　　　　2. 相對長度單位rem 

　　　　　　rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

　　　　　　咱們來看下面的例子：

html代碼：

複製代碼 
<div class="one">
    <span>第一層</span>
    <div class="two">
        <span>第二層</span>
        <div class="three">
            <span>第三層</span>
        </div>
    </div>
</div>
複製代碼

css代碼：

複製代碼 
html{
    font-size: 20px;
}
.one{
    font-size: 1.5rem;
}
.two{
    font-size: 0.5rem;
}
.three{
    font-size: 2rem;
}
複製代碼 
結果： 
　　　.one  --->  30px    1.5 * 20 = 30px
　　　.two  --->  10px    0.5 * 20 = 10px
　　　.three ---> 40px     2  * 20 = 40px

 代碼分析：

      rem是CSS3中引進的新單位，rem的值始終相對於根元素html中設置的font-size大小，若是沒有設置，則在大多數瀏覽器中默認爲font-size爲16px，那麼1rem = 16px;

因此對於class名稱爲one的div而言，1.5rem = 1.5 * 20 = 30px。其餘的相似，再也不一一贅述。

 

 

　　　　關於em和rem的總結：

　　　　「em」是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小，在咱們屢次使用時，就會帶來沒法預知的錯誤風險。而rem則相對就好用不少了，就我所在的公司而言，在實際的項目開發中用rem的狀況也是很是多的。估計在不久的未來，國內的設計師將會和國外的設計師同樣，愛上rem。

 

　　五. Js動態設置rem來實現移動端字體的自適應

　　　　實際上講了這麼多，你們可能已經瞭解了rem的用法，可是還不瞭解如何利用rem去實現移動端的自適應。說到底，rem實現移動端自適應的原來在於它自己的特性，它能夠始終根據根元素的字體大小去改變本身的值。目前各類常見手機的屏幕尺寸大小以下圖所示：

           

　　

　　咱們想實現手機端自適應，就是可讓頁面的元素字體、間距、寬高等屬性的屬性值能夠隨着手機屏幕尺寸的變化而變化，接下來咱們看如何利用js來動態的設置rem並實現移動端的自適應，Js代碼以下：

//獲取html元素
var html = document.getElementsByTagName('html')[0]; 
//屏幕的寬度（兼容處理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750這個數字是根據你的設計圖的實際大小來的，因此值具體根據設計圖的大小
html.style.fontSize = w / 750 + "px";

 

　　以上代碼實現了利用Js獲取設備屏幕的寬度，並根據屏幕的寬度動態改變根元素html的font-siz屬性的做用。好比說，對於iphone6而言，屏幕尺寸爲750，那麼在iPhone6下html的font-size爲1px,因此1rem = 1px;對於iPhone5而言，屏幕尺寸爲640，那麼在iPhone5下html的font-size爲640/750 = 0.85333px，因此1rem = 0.85333px。這樣的話即便咱們對一個元素設置一樣的大小和單位，也會在不一樣的設備下顯示不一樣的大小。好比說div{width:100rem},在iPhone6下它的寬度將等於100px，而在iPhone5下它的寬度等於100 * 0.85333 = 85.333px。這樣咱們就真正實現了移動端的自適應，怎麼樣，是否是很簡單呢！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程