『前端開發』- 兼容IE8的響應式開發

時間  2019-11-16
標籤 前端開發 兼容 ie8 響應 開發 欄目 瀏覽器 简体版
原文   原文鏈接

兼容IE8的響應式開發

全文概要：

1. 經常使用解決方案javascript

2. 使IE8兼容媒體查詢 @mediacss

3. px和em和rem的霸主位置html

4. 使IE8兼容rem前端

經常使用解決方案

所謂響應式開發，就是指在不一樣的系統，設備環境，不一樣的分辨率下，界面進行不一樣的響應和調整適配html5

咱們簡單理解爲，在不一樣的瀏覽器上，不一樣分辨率的顯示器上，咱們的網頁能進行自適應響應調整，使得最後的界面仍是能達到設計師高保真圖的效果。 在PC端開發中，常常會出現系統得兼容IE8的要求，這次咱們討論的是在這種需求下，如何達到所謂的響應式開發的要求。 經常使用的響應式開發解決方案（針對兼容IE8的大前提下）有：java

  • 定寬法 天貓登陸頁採用的方法是定寬法，即設定一個最小寬度min-width:1190px，瀏覽器小於這個寬度則出現橫向滾動條，若是大於這個寬度，則設置margin:auto使其自動左右居中。 這樣的好處是省事，兼容性也好，可是缺陷就是在小屏幕分辨率時，某些元素會變得比較大，有些突兀。便可能會出現不知足於設計圖的比例的狀況。元素在屏幕中Y軸的位置也會變化。 1920 * 1080下的天貓登陸頁截圖
    1920*1080下的天貓登陸頁.png

1600 * 900下的天貓登陸頁截圖 jquery

1600*900下的天貓登陸頁.png

  • 媒體查詢 + 引用多CSS法 讓IE8兼容媒體查詢，即@media的方法在這先賣個關子，稍後咱們會一一道來。 此方法的思路就是首先判斷當前的屏幕分辨率或屏幕寬度，而後對於需求所要適配的分辨率分別加載不一樣的CSS。 在這些不一樣的CSS中，咱們能夠按比例實現設計圖的需求，能夠完美實現不一樣的分辨率下都達到設計圖中的比例效果，元素在屏幕中的X軸和Y軸的位置也不會變化。可是缺陷也有，由於這裏的網頁的解析流程是先解析一些公共的CSS樣式，在執行腳本判斷屏幕分辨率，再進行加載相對應的CSS文件，與此同時，解析樹可能已經開始解析DOM結構了，就可能會形成閃屏的結果（固然，也不必定會出現，我就沒有出現0.0）。因此問題就是會影響頁面的響應時間，可是這也有相應的解決方案，那就是服務端渲染，服務端斷定發送請求的系統環境和屏幕分辨率等，來加載不一樣的CSS樣式表和JS腳本。但這不是本文的重點，有興趣的同窗能夠自行探索哈！
// 此方法兼容IE8
// 分辨率大於等於1680，大部分爲1920的狀況下，調用此css
<script>
    if(window.screen.width >= 1680) {
        document.write('<link rel="stylesheet" href="../../css/oc_login_1920.css">');
    }
    // 分辨率小於等於1600的狀況下，調用此css
    else {
        document.write('<link rel="stylesheet" href="../../css/oc_login_1600.css">');
    }
</script>
複製代碼

1920 * 1080下的登錄頁截圖 git

1920*1080下的登錄頁.png
1600 * 900下的登錄頁截圖
1600*900下的登錄頁.png

  • 媒體查詢 + em/rem法 此方法的奧義有些與上面的多CSS法相似，不過用了此方法的同窗就會鄙視多CSS法的重複勞動的愚蠢了，由於這個方法用一個CSS就能夠了，只不過寬度、高度等屬性單位得從px改成em或rem。 咦，你可能已經意識到了W3C不是從小教咱們rem不兼容IE8的嗎！那咱們怎麼用rem啊！ 答曰：照用，用點hack科技就好啦 0.0若是你好像都不知道em和rem是啥，emmmmm，往下滑滑，看了 px和em和rem的霸主位置 你就知道啦！
@media screen and (max-width: 1600px) {
	html {
		color: brown;
		font-size: 100%;
	}
}

@media screen and (min-width: 1601px) {
	html {
		color: blueviolet;
		font-size: 200%;
	}
}

//rem
.box {
	margin: 2rem;
}

//em
.box {
	margin: 2em;
}

複製代碼

1920 * 1080下的巨醜Demo頁截圖 github

1920*1080下的巨醜Demo.png
1600 * 900下的巨醜Demo頁截圖
1600*900下的巨醜Demo.png

使IE8兼容媒體查詢 @media

所謂媒體查詢，就是針對不一樣的屏幕尺寸設置不一樣的樣式，在響應式設計中，是很是有用的。web

使用@media，在重置瀏覽器大小的過程當中，頁面會根據瀏覽器的寬度和高度從新渲染頁面。 一般，咱們只用到它的min-width和max-width屬性，這裏，咱們也是。 可是惋惜的是IE9纔開始支持@media，其餘主流瀏覽器早已支持，如何在IE8中也能使用@media呢？

  • hack科技之respond.js 下載地址：github.com/scottjehl/R… respond.js使IE6-8可以支持@media的min-width和max-width屬性 使用需知：

    • 該腳本不依賴於任何庫或框架，壓縮後大小爲1kb左右
    • 該腳本不解析@import導入的CSS和內聯寫在style裏的CSS，因此建議使用link引入CSS
    • 該腳本可能會不支持file:// url，該HTML得運行在web 服務器上 什麼意思呢，同一個文件在IE8中打開，在http://127.0.0.1:8020/HelloHBuilder/Demo.html這種運行在web服務器上的 就可以正常使用該腳本，可是直接本地打開HTML，D:\HBuilderProject\HelloHBuilder\Demo.html相似這樣的文件地址，該腳本就會報錯，拒絕訪問。
    • CSS腳本建議不要設成UTF-8，不然在IE7/8中可能會出現錯誤（我測試了一下，我這沒有出現），而且數量不要超過32個，不然IE會報Invalid procedure call or argument錯誤。
    • 該腳本不支持Sass的source maps(生成文件到源文件的映射)
    • 不支持嵌套的媒體查詢

    工做原理：

    • 該腳本首先經過Ajax請求遍歷全部外部連接的CSS文件，並解析文本響應，在其內容上經過正則表達式來找到與媒體查詢相關聯的CSS塊，並根據他們的min-width和max-width與當前瀏覽器寬度進行比較，啓用和禁用相關的樣式代碼，接着按順序將這些包含@media的CSS塊附加到頭部。

    測試Demo：

    <!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5-響應式佈局--respond.js-Sakura</title>
		<link rel="stylesheet" href="test.css" charset="utf-8">
		<script src="js/respond.min.js"></script>
	</head>
	<body>
		<div>
			使IE6~8支持響應式佈局——Sakura
		</div>
	</body>
</html>
複製代碼

    CSS文件：

    html,
body {
   height: 100%;
}

@media only screen and (min-width: 480px) {
  body {
	  background: blanchedalmond;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
   body {
	   background: gray;
   }
}

@media screen and (min-width: 1024px) {
   body {
	   background: coral;
   }
}
複製代碼

  • 舊瓶新酒的window.screen.width 直接經過判斷window.screen.width的大小，來執行不一樣的樣式代碼。此方法也兼容IE8

    //此方法兼容IE8
// 分辨率大於等於1680，大部分爲1920的狀況下，調用此css
if(window.screen.width >= 1680) {
    document.write('<link rel="stylesheet" href="../../css/oc_login_1920.css">');
}
// 分辨率小於等於1600的狀況下，調用此css
else {
 document.write('<link rel="stylesheet" href="../../css/oc_login_1600.css">');
}
複製代碼

px和em和rem的霸主位置

在前端開發中，咱們經常使用的長度單位有px,em,rem等，雖然都是相對單位，但因爲參照物不一樣，各自特性也不一樣。

  • px是一個相對於屏幕分辨率的像素長度單位。比較穩定和精確，可是缺點也是此，在不一樣分辨率下的響應式效果很差。但元素字體大小仍是推薦使用px，由於點陣顯示緣故，某些數字17px等可能會出現讓字體出現鋸齒等顯示不友好的狀況。可是不得不說，這是目前國內前端開發使用最多的長度單位，兼容性完美。
  • em是一個相對於父元素的字體大小(font-size)單位。特色是不是一成不變的，而是相對於父元素的font-size值變化而變化，若是父元素沒有設置font-size的值，則向上繼續尋找父元素的父元素的font-size，直到跟元素爲止。**瀏覽器默認的font-size都爲16px，一般別人會建議你設爲font-size: 62.5%，如此一來基礎值font-size就變爲10px，即10px = 1em，可是！你得chrome不能設置小於12px的font-size，當你設置小於12px時，chrome都以font-size: 12px呈現。**因此使用起來會存在一些煩惱，解決方案是，首先咱們通常都會在body{}下設置font-size的值，可是若是咱們要使用的em單位的元素已經被父級元素或者爺爺輩的人設置font-size大小污染，那咱們就在父元素從新設置font-size值爲基礎值，實在不行，只有按照父元素的font-size比例從新算一次。
  • rem是一個相對於根元素的字體大小(font-size)單位。這是一個集於px精神和em優勢於一身的單位，由於它是相對於根元素裏的font-size而變的單位，不會像em由於複雜的倫理關係而被幹擾，因此在不一樣的分辨率上的設備中也能夠體現穩定性，而後又具有響應性。聽起來真美好，可是可是！這哥們兼容性還不夠啊，從IE9開始部分兼容，直到IE11纔開始徹底兼容，這與咱們兼容IE8的出發點差了一點點啊。一般你們使用rem的時候，若是須要提升兼容性，就會同時使用px和rem兩個單位，先寫px再寫rem，若是瀏覽器支持rem，則rem會將先前的px給覆蓋，不支持也有默認的px能夠支持，可是這樣子IE8的響應性也泡湯了。可是腦洞大一些，若是我不是使用px和rem而是同時使用em和rem，世界會不會有什麼不同？

使IE8兼容rem

既然rem這麼美好，IE8卻不能使用，這很難受啊！別慌，接下來咱們就來讓IE8也能兼容rem。

  • hack科技之rem.js rem.js是一款讓IE8如下的瀏覽器都兼容rem屬性的腳本，其原理是一旦判斷當前瀏覽器不支持rem，該腳本就讀取全部的外部連接CSS，並使用正則來查找使用了rem的元素，而後將這些使用了rem的地方從新計算爲px，並將其寫入head中，在內聯中重寫覆蓋。
  • 使用需知：
    1. 在全部CSS文件引用以後引用rem.js，並在標籤的末尾引入rem.js。
    2. 當你想rem.js跳過一些樣式表，只需將data-norem做爲屬性添加到要忽略的CSS文件的link引入上。值得一提的是，這個忽略效果只會在IE8上有效果， 爲何呢？由於以後的瀏覽器都開始兼容rem了啊哈哈哈哈。
  • demo
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<link rel="stylesheet" href="remDemo.css">
		<!--如下的css文件在IE8瀏覽器中會被rem.js忽略-->
		<!--其餘瀏覽器中依舊會顯示，由於其餘瀏覽器支持rem！-->
		<link rel="stylesheet" type="text/css" href="test.css" data-norem />

		<script src="js/html5shiv.min.js"></script>
		<script src="js/respond.min.js"></script>
		<!--		<script src="js/jquery-1.8.3.min.js"></script>-->
	</head>

	<body>
		<div class="box">
			<p class="title">歡迎來到主界面
				<p class="content">這裏是叮叮咚咚</p>
			</p>
			<ul>
				<li>
					<label>姓名</label>
					<input type="text" class="name" />
				</li>
				<li>
					<label>姓名</label>
					<input type="text" class="password" />
				</li>
			</ul>
		</div>

		<script src="js/rem.min.js" type="text/javascript"></script>
	</body>

</html>
複製代碼

test.css文件

html,
body {
	height: 100%;
}

@media only screen and (min-width: 480px) {
	body {
		background: blanchedalmond;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	body {
		background: gray;
	}
}

@media screen and (min-width: 1024px) {
	body {
		background: coral;
	}
}

li label {
	font-size: 2rem;
	margin-left: 4rem;
}
複製代碼

remDemo.css文件

@media screen and (max-width: 1600px) {
	html {
		color: brown;
		font-size: 200%;
	}
}

@media screen and (min-width: 1601px) {
	html {
		color: blueviolet;
		font-size: 400%;
	}
}

.box {
	margin: 2rem;
}

.title {
	margin: 2rem;
	font-size: 4rem;
}

.content {
	//margin-top: 8rem;
	font-size: 2rem;
}

input {
	margin-top: 1rem;
}
複製代碼

19201080&&IE8下截圖

1920*1080&&IE8下
19201080&&chrome下截圖
1920*1080&&chrome下.png

至此，關於兼容IE8的響應式開發已經所有結束了！撒花撒花撒花~

如圖小夥伴有疑問或者不知道那些js文件去哪裏下載（去github上！！！按名字搜索！），emmmm，實在沒辦法能夠留言或郵箱M我，（應該）第一時間將這些文件發回給小夥伴的！

【個人郵箱->】sakura_p@qq.com

技術開源，碼文不易，請尊重原創

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