css移動端的兼容性問題 （適配問題）
一、浮動問題
簡述：
我們在平時切頁面時,經常會出現用完浮動(float),忘記刪除.下面的布局出現莫名其妙的空白高度,導致布局調整失敗
1、1.父級div定義height
原理:父級div手動定義height,就解決了父級div無法自動獲取到高度問題
優點:簡單,代碼少,容易掌握
缺點:只適合高度固定的不懼,要給出精確的高度,如果高度和父級div不一樣
2.結尾處加空div標簽clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽
3.父級div定義偽類:after和zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持
4.父級div定義overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，代碼少，瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏(只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用)
5、5.父級div定義overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，代碼少，瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
6.父級div也一起浮動
原理：所有代碼一起浮動，就變成了一個整體
優點：沒有優點
缺點：會產生新的浮動問題。
7.父級div定義display:table
原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題
8.結尾處加br標簽clear:both
原理：父級div定義zoom:1來解決IE浮動問題，結尾處加br標簽clear:both
避免使用浮動
1.表格布局
2.使用display:inline-block
IE6/7不支持display:inline-block屬性，只是可以讓標簽有類似于inline-block的屬性.使用text-align:justify;做測試的時候的一些樣式表現證實了：確實IE6/7是不支持display:inline-block屬性，只是讓其表現的跟inline-block一樣，對于inline水平的元素，其表現度可以用perfect一詞來形容了
所以拿li舉例 ul{display:inline-block;} li{display:inline;}
3.一點小阻撓：inline-block元素間的換行符空格間隙問題
可在父級元素樣式下寫font-size:0; 子級元素各自給特定的font-size
letter-spacing可以嘗試給負值來解決.但是，Opera瀏覽器下極限是間隙1像素，0像素會反彈，換行符間隙還原
4.更進一步：更加靈活的inline-block列表布局
使用text-align:justify可以實現自動等寬水平排列的列表布局，而且是兩端對齊的，不需要計算寬度，一切都是瀏覽器自動的，很方便很強大。
5、詳細教程(http://www.zhangxinxu.com/wordpress/2010/11/拜拜了浮動布局-基于displayinline-block的列表布局/)
二、
鏈接:http://blog.csdn.net/chenmoquan/article/details/41547609
1、水平居中—使用 text-align
2、margin: auto 居中
3、table-cell 居中
4、Absolute 居中
5、使用 translate 居中
6、使用 Flexbox 居中
7、使用 calc 居中
三、常見的兼容性問題
1、常見的問題:height設置100%沒有高度,但是有寬度
2、造成這個現象的原因是:瀏覽器解析規則引發的高度自適應問題
兼容問題主要存在:
IE和FireFox瀏覽器的常見問題margin,padding,box-sizing
*{margin:0;padding:0;box-sizing:border-box;}
IE的不兼容問題(比如一些標簽video,audio等標簽)
<!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->
四、css hack
1、hack的利弊
一般情況下，我們盡量避免使用CSShack，但是有些情況為了顧及用戶體驗實現向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件注釋等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔。相信只要大家一起努力，少用、慎用hack，未來一定會促使瀏覽器廠商的標準越來越趨于統一，順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack，必將減輕我們編碼的復雜度，少做無用功。
2、hack的方式 Hack主要針對IE瀏覽器
CSS hack方式一：條件注釋法
CSS hack方式二：類內屬性前綴法
CSS hack方式三：選擇器前綴法
五、css filter
1、!important
css !important作用是提高指定CSS樣式規則的應用優先權。
!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權。語法格式{ cssRule !important }，即寫在定義的最后面，例如：box{color:red !important;}
在CSS中，通過對某一樣式聲明! important ，可以更改默認的CSS樣式優先級規則，使該條樣式屬性聲明具有最高優先級，也就是相當于寫在最下面。
但是跟CSS3動畫不一樣
-webkit-
-ms-
-o-
-ff-
no prefix
六、更換渲染模式
1、IE 兼容模式
Bootstrap中不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運行最新的渲染模式下，建議將此 <meta> 標簽加入到你的頁面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2、國產瀏覽器高速模式
國內瀏覽器廠商一般都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，所有國產瀏覽器都是默認使用兼容模式，這就造成由于低版本 IE （IE8 及以下）內核讓基于 Bootstrap 構建的網站展現效果很糟糕的情況。幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所作為了！
3、將下面的 <meta> 標簽加入到頁面中，可以讓部分國產瀏覽器默認采用高速模式渲染頁面：
<meta name="renderer" content="webkit">
七、瀏覽器內核
1、IE: trident內核
Firefox：gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基于webkit，Google與Opera Software共同開發)
2、瀏覽器內核對于瀏覽器而言，是基礎，是依托。如果沒有了瀏覽器內核，那么瀏覽器是無法獨立存在且產生作用的。其實瀏覽器內核學名叫做渲染引擎，起到的作用就是顯示網頁。它的存在，決定了網頁的呈現的內容、格式以及效果。所以說，一個好的瀏覽器，一定是基于有一個穩定、高端、作用明顯的瀏覽器內核的。
3、WebKit內核，它是目前應用范圍最大的開源內核，新出的X5內核也同樣是依托于WebKit的基礎上，對其進行深度的開發和拓展才形成的。目前應用于各大主流瀏覽器，包括AppleSafari（蘋果瀏覽器）Android自帶瀏覽器、Symbian手機瀏覽器等。Firefox內核，同樣也是開源內核，但是它的應用范圍相對來說就要小不少了。同時還有IE內核，它的存在已經有了一定的歷史，但是由于存在較嚴重的安全問題，漸漸被取代。
八、讓H5頁面適應所有的iphone手機以及安卓機型的六大技巧
1、兼容iphone各版本機型最佳的方式就是自適應
2、viewport 簡單粗暴的方式：
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
3、為什么是1.3？
目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那么以1.29倍也就約等于1.3了。
為了讓手機也能獲得良好的網頁瀏覽體驗，Apple找到了一個辦法：在移動版(iOS)的Safari中定義了viewport meta標簽①，它的作用就是創建一個虛擬的窗口(viewport)，而且這個虛擬窗口的分辨率接近于桌面顯示器，Apple將其定位為980px②。以一代iphone下的Safari來說就是：
viewport全部屬性&值如下：
width: viewport寬度
height: viewport高度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例
minimum-scale: 最小縮放比例
user-scalable: 是否允許用戶縮放例：width=960 或 device-width
height=1000 或 device-height
initial-scale=0.5
maximum-scale=2
minimum-scale=1
user-scalable=1 或 0 (yes 或 no)layout viewport的默認值在Apple實現viewport后，其他瀏覽器也加入了對viewport meta的支持，但彼此間還是有些差異，差異最大的是layout viewport的表現：Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
IE: 974px最后關注下width=device-width其實這個屬性&值很有意思，字面意應該是viewport寬度等于設備寬度，但在實際中不同的瀏覽器都給出了個定值：320px；這個值還是源于 Apple，因為早期iphone的分辨率為320px × 480px，大量為iphone量身定制的網站都設置了viewport:width=device-width，并且按照寬度320px來設計制作，所 以其他瀏覽器加入viewport支持時為了兼容性也將device-width定義為了320px。注解① 除此之外不同移動瀏覽器廠商也有不同的解決方案，例如UCweb就是使用中間件技術
九、REM 布局
1、REM布局
REM是CSS3新增的一種單位，并且移動端的支持度很高，android2.x+，ios5+ 都支持。REM是相對于dom結構的根元素來設置大小，也就是html這個元素。相較于em單位，rem使用上更容易理解及運用。
REM與PX的換算可以查看網址： https://offroadcode.com/prototypes/rem-calculator/
假設，html我們設置font-size:12px; 也就是說12px相對于1rem，那么18px也就是 18/12 = 1.5rem。
那么我們以320px的設計布局為基準，將html設置為font-size:100px，即100px = 1rem。(設置100px是為了方便計算)那么可以將大部分px單位除以100就可以直接改成rem單位了。
REM如何做響應式布局？
2、如果僅僅是適配ip6+設備，那么使用media query就行
偽代碼如下：
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*實際相當于14px*/}
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
html{font-size: 129.375px;}
}
3、如果是完全自適應，那么可以通過JS來控制
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
/*recalc重新計算*/
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //false由里向外
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
4、圖片自適應
REM布局，那么用百分比布局也能實現一樣的效果，但是用百分比布局，必須要面臨一個問題：圖片寬度100%，頁面加載時會存在高度塌陷的問題
那么可以用padding-top設置百分比值來實現自適應。
公式如下：
padding-top = (Image Height / Image Width) * 100%
原理：padding-top值為百分比時，取值是是相對于寬度的。
.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}
5、圖片高清化
設備像素比問題
<img src="small.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">
不過目前前端這邊圖片的實現基本都用lazyload的方式實現。srcset的圖片加載方式在實際項目中運用還比較少。
6、背景圖高清化
media query 實現高清化
img標簽的高清化，可以通過JS判斷devicePixelRatio的值來加載不同尺寸的圖片，但是對于背景圖，寫在CSS中的，用JS來判斷就略麻煩了，還好CSS通過media query也能判斷dpr。
目前兼容性最好的背景圖高清化實現方式，使用media query的 -webkit-min-device-pixel-ratio 做判斷：(代碼見下頁)
7、/* 普通顯示屏(設備像素比例小于等于1)使用1倍的圖 */
.css{
background-image: url(img_1x.png);
}
/* 高清顯示屏(設備像素比例大于等于2)使用2倍圖 */
@media only screen and (-webkit-min-device-pixel-ratio:2){
.css{
background-image: url(img_2x.png);
}
}
/* 高清顯示屏(設備像素比例大于等于3)使用3倍圖 */
@media only screen and (-webkit-min-device-pixel-ratio:3){
.css{
background-image: url(img_3x.png);
}
}
詳細的各種機型和對應的-webkit-min-device-pixel-ratio 值
8、image-set 實現高清化
image-set，它是Webkit的私有屬性，也是Css4的一個屬性，它是為了解決Retina屏幕下的圖像顯示而生。
使用方式也很簡單。偽代碼如下：
.css {
background-image: url(1x.png); /*不支持image-set的情況下顯示*/
background: -webkit-image-set(
url(1x.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */
url(2x.png) 2x,/* 支持image-set的瀏覽器的[2倍Retina屏幕] */
url(3x.png) 3x/* 支持image-set的瀏覽器的[3倍Retina屏幕] */
);
}
目前移動端的支持程度來看，ios7+，android 4.4+ 下已經支持了。如果僅僅是做ip6+的高清適配方案。 image-set 也是一種實現方案。
使用image-set 與 media query 實現有什么區別及好處？
image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味著，如果在低網速下，瀏覽器可以選擇加載低分辨率的圖片。（PS：好智能的樣子）
但是相比如media query的實現，image-set僅支持單個圖片的高清化，不適合在css sprite下使用。 并且兼容性也是一大硬傷。
一般來說，用在LOGO區域，單個圖片圖標的區域下，也是個不錯的選擇。
9、關于圖片列表適配
也就是要讓布局更靈活，在電商網站里面，商品列表是一個非常常見的結構。一種比較智能的列表方式是：兩端對齊，間距自適應。(圣杯布局)
那么可以使用FLEXBOX布局來實現兩端對齊的效果，也可以使用 text-align:justify 的方式實現。
具體實現辦法：http://www.ghugo.com/inline-block-justify/
css4新增選擇器: http://css4-selectors.com/selectors/
技術博客推薦: http://www.zhangxinxu.com/wordpress/category/js/
阿里矢量圖標庫: http://iconfont.cn/
碼云: http://git.oschina.net/
github: http://www.github.com/
stackoverflow: http://stackoverflow.com/